webpack

 

（1）       npm init –yes

（2）       npm install webpack --save-dev

（3）       如果想要支持css文件的打包需要：npm install css-loader style-loader --save-dev

（4）       webpack hello.js helo.bundel.js(打包hello.js文件 helo.bundel.js是打包完后的名称)

（5）       在被打包的hello.js中引入其他的js或css文件，例如require(‘./world.js’) require(‘style-loader!css-loader!./style.css’)

（6）       绑定模块 webpack hello.js hello.bundle.js --module-bind ‘css=style-loader!css-loader’ --watch      

 

(1)     建立文件webpack.config.js    更名的话

(2)     npm init –yes

(3)     npm install webpack --save-dev

(4)     如果想查看打包的过程和模块，颜色等，可以在package.json中加"webpack":"webpack --config webpack.config.js --progress --display-modulesdui --colors --display-reason"

 

(5)     对两个平行的js文件可以在webpack.config.js的entry中设置数组的形式

 

(6)     想生成两个打包后的文件

 

（1）       在loaders中js的匹配:

安装babel

 

 

提高转换速度：

exclude:'./node_modules/'   exclude不打包node_modules中的文件

,include:'./src/'  include只打包src中的文件

 

 

 

（2）       使用处理项目中的css

postcss-loader:处理css前缀兼容的

入口文件中引入

(3)处理转换less

         安装

 

（3）       处理html模板文件

npm install html-loader –save-dev

在webpack.config.js中配置

 

 

1)       入口文件app.js

 

Layer.js中

Layer.html是模板html文件  插入到index.html文件中的id为app节点的中

 

（4）       处理图片和其他文件

npm i file-loader –save-dev

例外的在模板中引用图片

 

在webpack.config.js中配置