建立项目的webpack配置文件
1:打开命令行,新建一个webpack-demo的文件夹,请忽视我老打错字
2:初始化这个目录 npm init
3:安装webpack, npm install webpack --save-dev,如果想安装webpack3的话就输入npm install [email protected] --save-dev就可以了
4:建立一个存放代码源文件的目录:mkdir src
5:打包过的静态资源:mkdir dist
6:创建一个index.html,引用将来要打包的文件bundle.js
7:在src目录下新建一个script文件夹,style文件夹,在webpack-demo文件夹下创建一个webpack-config.js
8:配置webpack-config.js
9:随便给main.js写个函数function helloworld(){}
10:cmd直接执行webpack
11:发现问题:dist文件下没有自动生成js文件夹和bundle.js,解决问题:因为webpack版本的原因,导致了路径报错,在/dist/js前面加上__dirname就可以解决这个问题了
12:查看bundle.js
13:演示--config的使用 把webpack.config.js改成webpack.dev.config.js会报错
解决办法:webpack --config webpack.dev.config.js成功了
14:第13点告诉我们,我们如果改变了配置文件(webpack.config.js)的名称,就必须使用--config这个参数,那么有没有办法不这样做呢?有的
打开package.js,找到script,添加配置,这个配置的含义:
webpack执行webpack.config.js这个文件,显示过程,显示模块明细,彩色显示,显示打包原因