webpack练习

一直接在命令行中使用webpack

1. 进入一个文件夹，在命令行中运行npm init,新建一个项目。

2.运行npm install webpack --save-dev, 下载webpack.（我局部安装用webpack命令提示not found，然后我用npm install webpack -g；npm i webpack-cli -g；这两条命令全局安装才可以）。

3.运行subl ./, 用sublime打开当前文件。

4.新建hello.js文件然后用webpack hello.js -o hello.bundle.js命令把它打包成hello.bundle.js文件（我看的文档是webpack3版本，现在是4版本，webpack hello.js hello.bundle.js这个命令在当前版本报错）。

5.打包css文件，需要loader，首先下载，cnpm i css-loader style-loader --save-dev；下载完成后，需要放到js文件中引用，如下：

，然后运行webpack hello.js -o hello.bundle.js，就可以将js打包。

或者不在js文件中写，这样也可以， webpack hello.js -o hello.bundle.js --module-bind 'css=style-loader!css-loader'进行打包。

6.更新js文件后自动打包，webpack hello.js -o hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch。

7.在命令行看到打包过程，webpack hello.js -o hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress。

8.在命令行看到打包模块，webpack hello.js -o hello.bundle.js --module-bind 'css=style-loader!css-loader' --display-modules 。

9.在命令行看到打包原因，webpack hello.js -o hello.bundle.js --module-bind 'css=style-loader!css-loader' --display-reasons 。

二在配置文件中使用webpack

1.新建项目，在项目下建个webpack.config.js,内容如下，然后再命令行用webpack指令进行JS打包。

   如果配置文件不是这个名称而是webpack.dev.config.js，则需要修改命令为  webpack --config webpack.dev.config.js.

2.想要查看更多指令，需要在package.json中配置，然后在命令行中运行 npm run script.

    

3.入口文件是两个没有互相依赖的JS文件时，webpack.config.js中entry应该改为数组形式，如下：

如果是要打包为两个独立的JS文件，则entry和output都需要修改，

三 在HTML页面中的使用

   首先在npm中安装 html-webpack-plugin，使用指令 npm install html-webpack-plugin --save-dev,然后在webpack.config.js中引用。如下：

  

在index.html模板中获取如下：