webpack的简单使用

webpack的简单使用

项目初始化

1. npm init

2. npm install --save-dev webpack

   npm install --save-dev webpack-cli

   –save表示非全局下载；–global表示全局下载

   （不同项目可能需要不同的依赖版本，故用–save更好）
   -dev表示开发环境中使用，部署后不需要用到
   –save 部署后也要用

   也可以一次下载多个

   npm install --save-dev webpack webpack-cli

3. 在根目录下新建文件webpack.config.js

   const path = require('path');//nodejs的一个全局变量，获取当前目录的绝对路径
   
   var config = {
       entry: './src/index.js',
       output: {
           filename: 'bundle.js', //打包之后的文件
           path: path.resolve(__dirname, 'dist') //使用'_dirname'是为了避免解决在不同服务器上绝对路径不同的问题
       }
   };
   
   module.exports = config;
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11

   使用npx webpack命令构建项目

4. webpack相关配置

   1. 在每次构建前清理之前的输出
      在output中添加clean: true

   2. 设置不压缩和禁止生成license.txt(即不单独生成注释文件)

      1. 下载插件terser-webpack-plugin
      2. 在module.exports对象中中添加如下代码

      optimization: {
          minimize: false,//不压缩js
          minimizer: [
              new TerserPlugin({
                  extractComments: false,//不将注释提取到单独的文件夹
              })
          ]
      }
      
      1
      2
      3
      4
      5
      6
      7
      8
      9

webpack对JS的处理

1. 多页应用

   • 设置多入口
   • 设置多出口文件

    entry: {
       index: './src/page/index/index.js',
   },
   
   output: {
       filename: './js/[name].bundle.js', //打包之后的文件（用[name]处理多入口问题）----index.bundle.js
       path: path.resolve(__dirname, 'dist'), //使用'_dirname'是为了避免在不同服务器上绝对路径不同的问题
       clean: true,
   },
   1
   2
   3
   4
   5
   6
   7
   8
   9

2. jQuery的引用

   • 模块化方法

     1. 下载依赖npm install jquery --save
     2. 代码引入var $ = require('jquery');
     3. 用法不变$('body').html('hello jquery');

     问题：每一个需要使用jquery的地方都需要require，比较麻烦，会把jquery的js也打包进出口文件中

   • 传统方式

     1. 卸载依赖npm uninstall jquery --save

     2. CDN

        百度CDN：

        注意引用的先后顺序

   • 外部变量

     作为外部变量引入——传统直接引用+模块化的方式(webpack的配置文件中写，不需要install)

     externals: {
         'jquery': 'window.jQuery',//有些页面已经引入了jQuery，直接通过window对象获取，注意要大写
     }
     1
     2
     3

     注意在代码中区分一下 var $$ = require('jquery');

     var $$ = require('jquery');
     $$('body').html('hello jquery。。。。。');
     console.log('this is index js');
     1
     2
     3

3. 公共模块的提取(util，会被很多个js调用的模块，如jdbc)

   • 公共模块提取成独立的文件

     在优化optimization里写

     splitChunks: {
          name: 'util',//给公共模块文件命名为util
          chunks: 'all',
          minSize: 0
      },
     1
     2
     3
     4
     5

webpack对HTML、CSS、图片的处理**

1. CSS的处理

   下载加载器 css loader (style-loader)

   npm install --save-dev css-loader

   使用MiniCssExtractPlugin 将 CSS 从 bundle 中分离出来单独打包

   不要同时使用 style-loader 与 mini-css-extract-plugin

   下载插件

   引入
   const MiniCssExtractPlugin = require('mini-css-extract-plugin');

   在exports对象中添加

    module: {
       rules: [
           {
               test: /\.css$/i,
               use: [
                   {
                       loader: MiniCssExtractPlugin.loader,
                       options: {
                           publicPath: '../'
                       }
                   }
                   , 'css-loader'
               ],
           },
       ],
   },
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16

   plugins中添加

       new MiniCssExtractPlugin(
           {
               filename: 'css/[name].css'
           }),
   1
   2
   3
   4

2. 图片的加载

   • url-loader和file-loader limit参数和name参数控制图片格式和名称

     module的rules中添加

       {
           test: /\.(png|svg|jpg|gif)$/, use: [
               'url-loader?limit=1000&name=images/[name].[ext]'
           ]
       }
   1
   2
   3
   4
   5

3. HTML的处理

   • HtmlWebpack

webpackDevServer的使用

1. 安装依赖npm install --save-dev webpack-dev-server

2. 配置

   • 引入依赖

   const HtmlWebpackPlugin = require('html-webpack-plugin');
   
   1
   2

   • exports对象中添加

   devServer: {
       port: 8888,
       static: './dist',
   },
   1
   2
   3
   4

   • plugins中添加

       new HtmlWebpackPlugin({
           template: './src/view/index.html',
           filename: 'view/index.html',
           inject: true, //网页用到什么，自动识别注入
           hash: true, //版本号
           chunks: ['index'],//index入口的所有东西会被这个网页用到
           minify: {
               collapseWhitespace: false //不压缩
           }
       })
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10

   • 用于单页面应用，每个页面都要这样写，太麻烦了，提取为方法

   var getHtmlConfig = function (name) {
       return {
           template: './src/view/' + name + '.html',
           filename: 'view/' + name + '.html',
           inject: true, //网页用到什么，自动识别注入
           hash: true, //添加版本号,如
           chunks: ['common', name],//指出的入口的所有东西会被这个网页用到，将通用模块放到这就不用在每个js中require一次了
           minify: {
               collapseWhitespace: false //不压缩
           }
       }
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12

   • plugins中写调用方法

   new HtmlWebpackPlugin(getHtmlConfig('index')),
   new HtmlWebpackPlugin(getHtmlConfig('login')),
   new webpack.HotModuleReplacementPlugin()//启用热部署
   1
   2
   3

   单个 HTML 页面有多个入口时添加optimization.runtimeChunk: 'single'配置

3. 热部署成功后，保存即显示修改

   • package.json中的scripts中添加

     "start": "webpack-dev-server --open" //open表示自动打开浏览器，否则需要手动打开

   • 编译后使用npm run start命令即可打开浏览器

     注意：发布时别忘了重新编译，保存到dist里面去