webpack+ES6+Sass搭建多页面应用
webpack同之前的gulp相比，gulp属于非模块化打包工具，webpack属于模块化打包工具，两者的优劣这里不做过多分析（可自行百度）。
目的：是为了分享一下使用过程中，用到的插件、loader、遇到的各种问题以及解决办法，最后会附上最终代码。
在这个项目中，用webpack打包css、scss、js、图片文件、jquery、第三方插件、字体图标，编译es6、压缩html、压缩js、压缩css，基本涵盖了常用的东西。
代码结构如下
下面单独说几个难点
1、打包多页面，使用到的插件是html-wepack-plugin，html-loader，也就是你有多少个页面，就有多少个入口，也就写多少个模版文件。当然，页面过多时，可以考虑遍历处理。
//引入路径插件 const path = require('path'); //引入导出html插件 const HtmlWebpackPlugin = require('html-webpack-plugin'); const config = { //入口 entry:{ home:'./pages/lawSearchHomepage.js', list:'./pages/lawSearchList.js' }, //出口 output:{ filename: '[name].bundle.js', path: path.resolve(__dirname,'build') },
//插件 plugins: [ //html单独导出插件——首页 new HtmlWebpackPlugin({ filename:'lawSearchHomepage.html',//输出后的文件名称 template:'./pages/lawSearchHomepage.html',//模版页面路径 favicon:'./pages/images/favicon.ico',//页签图标 chunks:['home'],//需要引入的js文件名称 inject: true, hash:true,//哈希值 minify: {//压缩 removeComments: true, collapseWhitespace: true } }), //html单独导出插件——列表页 new HtmlWebpackPlugin({ filename:'lawSearchList.html', template:'./pages/lawSearchList.html', favicon:'./pages/images/favicon.ico', chunks:['list'], inject: true, hash:true, minify: { removeComments: true, collapseWhitespace: true } }) ] } module.exports = config;
2、单独打包css，使用到的插件extract-text-webpack-plugin，loader有style-loader、css-loader、sass-loader、node-sass，因为每个页面要引入相对应的css文件，所以，在js入口文件里通过require(‘./lawSearchHomepage.scss’)引如对应的scss文件，打包后css文件会单独打包，并通过link的形式引入html
//引入导出css插件 const ExtractTextPlugin = require('extract-text-webpack-plugin'); //loader {//CSS test:/\.css/, use:ExtractTextPlugin.extract({ use:['css-loader'] }) }, {//Sass test:/\.scss/, use:ExtractTextPlugin.extract({ fallback:"style-loader", use:['css-loader','sass-loader'] },) } //plugins //将css单独打包插件 new ExtractTextPlugin({ filename:"[name].css",//制定编译后的文件名称 allChunks:true,//把分割的块分别打包 }),
3、处理es6，安装babel、babel-loader@7（因为下面压缩js，其他版本报错）、babel-core、babel-preset-es2015（也是为了解决压缩js报错）
//loader {//ES6 test:/\.js$/, loader:'babel-loader', // exclude:__dirname+'node_modules',//不对这个进行babel转换，这里边已经打包好，这样能减少打包时间 // include:__dirname+'src'这里的src是你要编译的js文件的目录, exclude:path.resolve(__dirname,'node_modules'), include:path.resolve(__dirname,'pages'), query:{//若在package.json中定义了这个presets，则这边可以删掉 presets:['es2015'] } },
4、处理jquery，安装expose-loader
第一种方法可以通过在js里require(‘expose-loader?$!jquery’);引入jquery
第二种通过loader
//loader {//Jquery test: require.resolve('jquery'), use: [{ loader: 'expose-loader', options: 'jQuery' },{ loader: 'expose-loader', options: '$' }] },
5、压缩css，使用插件optimize-css-assets-webpack-plugin，安装cssnano
//引入压缩css的插件 const optimizeCss = require('optimize-css-assets-webpack-plugin'); //引入cssnano插件 const cssnano = require('cssnano'); //plugins plugins:[ new optimizeCss({ assetNameRegExp: /\.style\.css$/g, cssProcessor: cssnano, cssProcessorOptions: { discardComments: { removeAll: true } }, canPrint: true }), ], //压缩优化css,不写这个css还是没压缩，不知道为啥 optimization: { // minimize: true, minimizer: [new optimizeCss({})] },
6、压缩js，一般的情况下，js默认就是压缩状态，但是在压缩完css后，js就不是压缩的了，所以还是处理一下，编译更快
用的插件uglifyjs-webpack-plugin
//引入js压缩插件 const uglifyjs = require('uglifyjs-webpack-plugin'); //plugins new uglifyJs()
我的package.json中安装的插件
"devDependencies": { "babel": "^6.23.0", "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-preset-es2015": "^6.24.1", "clean-webpack-plugin": "^0.1.19", "css-loader": "^1.0.0", "cssnano": "^4.1.7", "expose-loader": "^0.7.5", "extract-text-webpack-plugin": "^4.0.0-beta.0", "file-loader": "^2.0.0", "font-awesome-webpack": "^0.0.5-beta.2", "html-loader": "^0.5.5", "html-webpack-plugin": "^3.2.0", "jquery": "^3.3.1", "node-sass": "^4.9.4", "optimize-css-assets-webpack-plugin": "^5.0.1", "postcss-loader": "^3.0.0", "sass-loader": "^7.1.0", "style-loader": "^0.23.1", "typeahead.js": "^0.11.1", "uglifyjs-webpack-plugin": "^2.0.1", "url-loader": "^1.1.2", "webpack": "^4.23.1", "webpack-cli": "^3.1.2", "webpack-dev-server": "^3.1.10" }
webpack.config.js里的代码（完整版）
//引入路径插件 const path = require('path'); //引入导出html插件 const HtmlWebpackPlugin = require('html-webpack-plugin'); //引入清除插件 const CleanWebpackPlugin = require('clean-webpack-plugin'); //引入导出css插件 const ExtractTextPlugin = require('extract-text-webpack-plugin'); //引入webpack const webpack = require('webpack'); //引入压缩css的插件 const optimizeCss = require('optimize-css-assets-webpack-plugin'); //引入cssnano插件 const cssnano = require('cssnano'); //引入js压缩插件 const uglifyjs = require('uglifyjs-webpack-plugin'); //webpack配置内容 const config = { //入口 entry:{ home:'./pages/lawSearchHomepage.js', list:'./pages/lawSearchList.js' }, //便于调试 devtool:'inline-source-map', //服务 devServer:{ contentBase:'./build/lawSearchHomepage.html' }, //loader模块 module:{ rules: [ {//ES6 test:/\.js$/, loader:'babel-loader', // exclude:__dirname+'node_modules',//不对这个进行babel转换，这里边已经打包好，这样能减少打包时间 // include:__dirname+'src'这里的src是你要编译的js文件的目录, exclude:path.resolve(__dirname,'node_modules'), include:path.resolve(__dirname,'pages'), query:{//若在package.json中定义了这个presets，则这边可以删掉 presets:['es2015'] } }, {//Jquery test: require.resolve('jquery'), use: [{ loader: 'expose-loader', options: 'jQuery' },{ loader: 'expose-loader', options: '$' }] }, {//CSS test:/\.css/, use:ExtractTextPlugin.extract({ use:['css-loader'] }) }, {//Sass test:/\.scss/, use:ExtractTextPlugin.extract({ fallback:"style-loader", use:['css-loader','sass-loader'] },) }, {//处理模块html test: /\.html$/, use: 'html-loader' }, {//图片 test: /\.(jpg|png|gif)$/, use: { loader: 'file-loader', options: { outputPath: 'images' } } }, //字体图标 { test: /\.(eot|svg|ttf|woff|woff2)\w*/, loader: 'file-loader' } ] }, //插件 plugins: [ //清空build文件下的多余文件 new CleanWebpackPlugin(['build']), //将css单独打包插件 new ExtractTextPlugin({ filename:"[name].css",//制定编译后的文件名称 allChunks:true,//把分割的块分别打包 }), //html单独导出插件——首页 new HtmlWebpackPlugin({ filename:'lawSearchHomepage.html',//输出后的文件名称 template:'./pages/lawSearchHomepage.html',//模版页面路径 favicon:'./pages/images/favicon.ico',//页签图标 chunks:['home'],//需要引入的js文件名称 inject: true, hash:true,//哈希值 minify: {//压缩 removeComments: true, collapseWhitespace: true } }), //html单独导出插件——列表页 new HtmlWebpackPlugin({ filename:'lawSearchList.html', template:'./pages/lawSearchList.html', favicon:'./pages/images/favicon.ico', chunks:['list'], inject: true, hash:true, minify: { removeComments: true, collapseWhitespace: true } }), //压缩css new optimizeCss({ assetNameRegExp: /\.style\.css$/g, cssProcessor: cssnano, cssProcessorOptions: { discardComments: { removeAll: true } }, canPrint: true }), //压缩js new uglifyjs() ], //压缩优化css optimization: { // minimize: true, minimizer: [new optimizeCss({})] }, //出口 output:{ filename: '[name].bundle.js', path: path.resolve(__dirname,'build') } } module.exports = config;
如果在打包过程中报模块没有定义错误，那就再安装一次，实在不行，直接删了node_modules文件，重新npm install一下。
版权声明：本文为hess原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。