webpack入门第二节:建立项目的webpack配置文件

 

建立项目的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这个文件,显示过程,显示模块明细,彩色显示,显示打包原因

猜你喜欢

转载自blog.csdn.net/weixin_42450794/article/details/81611218