首页 > 代码库 > webpack

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中配置

技术分享

技术分享

 

webpack