通常与React或Vue结合起来用
npm init //初始化
npm install webpack –save-dev //安装
webpack xxx.js xxx.bundle.js //打包
webpack自身只理解JavaScript,支持AMD,CMD,ES6,不支持CSS样式的引入,loader可以将所有类型的文件转换为webpack能够处理的有效模块。
例如
require(‘style-loader!css-loader./style.css’)
利用npm install css-loader style-loader –save-dev来安装loader
css-loader使得webpack可以处理css文件
style-loader将css文件插入到style标签中,该操作在css-loader处理之后。
可以利用webpack xxx.js xxx.bundle.js –module-bind’css=style-loader!css-loader’一次性将css-loader, style-loader加入模块
命令webpack xxx.js xxx.bundle.js –module-bind’css=style-loader!css-loader’ –watch每次更新后webpack自动打包。
webpack配置
新建一个webpack.config.js文件,然后利用CMD中的模块化工具
module.exports= {
entry:’./src/xxx.js’,
output: {
path:’./dist/js’,
filename:’bundle.js’
}
}
entry是webpack打包的入口,entry可为数组,也可为对象。若为对象时,后面生成的路径会覆盖前面的路径,因此需要给output里面的filename属性设置占位符,如[name],[hash],[chunkhash]
运行webpack
npm run webpack
html-webpack-plugin可以设置不确定的路径名,即将html与webpack打包的不确定路径名的js绑定在一起。安装时也用npm install
var htmlWebpackPlugin = require(‘html-webpack-plugin’)
module.exports= {
entry:’./src/xxx.js’,
output: {
path:’./dist/js’,
filename:’bundle.js’
}
plugins:[
new htmlWebpackPlugin();
]
}
通过以上的方式,绑定js文件的html文件不是根目录下的html,需要对new htmlWebpackPlugin()传参
new htmlWebpackPlugin({
template:‘index.html’//根目录文件
});
多页面的话,实例化多个new htmlWebpackPlugin()
,并传入相应的参数即可。
模板引用的话使用<%= htmlWebpackPlugin.options.xxx %>
来获取相应的值
<% ….%>
直接引用js 文件