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文件会单独打包，并通过 的形式引入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:{
    content :\'./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一下。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章