建立项目的webpack配置文件

来源：互联网发布：有网络但是网页打不开编辑：程序博客网时间：2024/06/05 19:59

1.在当前目录下新建2个文件夹
mkdir src
mkdir dist(存放静态资源的文件夹)

2.在当前目下新建index.html文件，引入打包后的bundle.js文件

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->    <title></title>  </head>  <body>    <script src="bundle.js"></script>  </body></html>

3.cd src ：进入src文件夹
mkdir script : 在src目录下新建script文件夹(存放脚本)
mkdir style : 在src目录下新建style文件夹(存放less、sass等样式文件)

4.在当前目录下新建webpack.config.js配置文件
代码如下：

module.exports = {    entry:'./src/script/main.js',       //打包入口文件    output:{            path:__dirname + '/dist/js',    //打包后的文件路径        filename:'bundle.js'            //打包后的文件名    }}

5.在src/script文件夹下新建main.js文件，代码如下：

function helloworld(){}

6.在命令行执行webpack命令，你会发现在dist文件夹下会生成js文件夹，在js文件夹里面就是我们的打包后的文件bundle.js

7.我们改下文件名字，把webpack.config.js改成webpack.dev.config.js，这时再在终端输入weback，你发现终端会出问题，如下：

No configuration file found and no output filename configured via CLI option.A configuration file could be named 'webpack.config.js' in the current directory.Use --help to display the CLI options.

那我们怎么才能打包成功呢？可以这样做，

webpack --config webpack.dev.config.js

结果发现打包再次生效，很神奇吧！

8.我们还是把文件名改回来吧，webpack.config.js

9.其实我们有很多的命令可以用，丰富我们的开发。打开package.json文件，
代码如下：

{   "scripts":{    "webpack":"webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"  },  "devDependencies": {    "css-loader": "^0.28.7",    "style-loader": "^0.19.0",    "webpack": "^3.8.1"  }}

//增加script
//意思是：指定webpack配置文件，查看打包过程命令，查看打包模块,打包出来的字是彩色的，查看打包原因

在命令行输入npm run webpack,终端输出结果如下：

> webpack --config webpack.config.js --progress --display-modules --colors --display-reasonsHash: 35cb086349332c27ce51Version: webpack 3.8.1Time: 72ms    Asset    Size  Chunks             Chunk Namesbundle.js  2.5 kB       0  [emitted]  main   [0] ./src/script/main.js 23 bytes {0} [built]

10.然后我们可以在命令行输入相关命令

阅读全文

0 0