webpack同之前的大口相比,吞咽属于非模块化打包工具,webpack属于模块化打包工具,两者的优劣这里不做过多分析(可自行百度)。
目的:是为了分享一下使用过程中,用到的插件,装载机,遇到的各种问题以及解决办法,最后会附上最终代码。
在这个项目中,用webpack打包css, scss, js,图片文件,jquery,第三方插件,字体图标,编译es6,压缩html,压缩js,压缩css,基本涵盖了常用的东西。
代码结构如下
//引入路径插件
const path=要求(“路径”);//引入导html插出件
const HtmlWebpackPlugin=要求(“html-webpack-plugin”);
常量配置={//入口
条目:{
家:“。/页面/lawSearchHomepage.js ',
列表:“/页面/lawSearchList.js。”
},//出口
输出:{
文件名:“[名字].bundle.js”,
路径:path.resolve (__dirname“构建”)
},//插件
插件:[//html单独导出插件——首页
新HtmlWebpackPlugin ({
文件名:“lawSearchHomepage.html ',//输出后的文件名称
模板:“。/页面/lawSearchHomepage.html ',//模版页面路径
标识:“。/页面/图片/ico的位于,//页签图标
块:['家']//需要引入的js文件名称
注射:没错,
散列:真的,//哈希值
使变小:{//压缩
removeComments:没错,
collapseWhitespace:真
}
}),//html单独导出插件——列表页
新HtmlWebpackPlugin ({
文件名:“lawSearchList.html”,
模板:“。/页面/lawSearchList.html ',
标识:“。/页面/图片/ico的位于,
块:“列表”,
注射:没错,
散列:没错,
使变小:{
removeComments:没错,
collapseWhitespace:真
}
}）
］
}
模块。出口=配置;
2,单独打包css,使用到的插件extract-text-webpack-plugin,装载机有style-loader, css-loader, sass-loader, node-sass,因为每个页面要引入相对应的css文件,所以,在js入口文件里通过要求(“。/lawSearchHomepage.scss”)引如对应的scss文件,打包后css文件会单独打包,并通过链接的形式引入html
3处理es6,安装巴别塔,babel-loader@7(因为下面压缩js,其他版本报错),babel-core, babel-preset-es2015(也是为了解决压缩js报错)
4处理jquery,安装expose-loader
第一种方法可以通过在js里要求(“jquery expose-loader& # 63;美元!”);引入jquery
第二种通过装载机
5,压缩css,使用插件optimize-css-assets-webpack-plugin,安装cssnano
