webpack常见配置

1.webpack配置
2.打包CSS样式资源
3.打包html资源
4.打包图片资源
5.打包其他资源字体图标
6.自动打包
7.开发环境配置
8.提取css成单独文件
9.css兼容性处理
10.js语法检查eslint
11.js兼容性处理
12.js压缩
13.html压缩
14.生产环境配置

1.webpack配置

1.ES6模块化的基本语法:

默认导出语法: export default 默认导出的成员;

默认导入语法: import 接受名称 from '名称绝对路径'

1.1直接导入执行模块化,不需要导出;

export default 名字;

2.webpack: 前端项目结构打包工具:

好处: 模块化支持, 代码压缩, js兼容问题, 性能优化;

3.webpack使用:

npm install webpack webpack-cli -D 安装依赖包
创建这个package.json文件 npm init -y
新建webpack.config.js文件:
在package.json里面的 script字段里面添加:

"dev":"webpack"
打包 npm run dev

4.webpack五大核心

　　1.1 Entry ' '

入口(Entry)指示 Webpack 以哪个文件为入口起点开始打包, 分析结构内部依赖图

　　1.2Output {}

输入(Output)指示 Webpack 打包后的资源 bundles 输出到哪里去 , 以及如何命名
filename:打包后的文件名 path:打包的路径和文件夹名

　　1.3Loader(1.下载, 2.使用)

loader 让 Webpack 能够去处理些 JavaScript 文件(webpack自身只理解JavaScript)
module {rules[ {test: , use:[] }....] }

　　1.4Plugins (1.下载, 1.引入, 3.使用) []

插件(Plugins)可以用于执行范围更广的任务.插件的范围包括, 从打包优化和压缩, 一直到重新定义环境中的变量等

　　1.5Mode ' '

模式(Mode)指示 Webpack 使用相应模式的配置
development:开发模式 ====>能让代码本地调试运行的环境
production:生产模式====>能让代码优化上线运行的环境

/*webpack.config.js*/ 
//resolve用来拼接绝对路径的方法
const {resolve} = require('path');

module.exports = {
    entry: './src/js/index.js',  //入口文件，webpack从这里开始打包
    output: {
    filename: 'build.js',  //输出文件名
    path: resolve(__dirname, 'build')  //输出路径，一般采用绝对路径
    //__dirname nodejs的变量，代表当前文件目录的绝对路径
    },
    //loader处理那些非JavaScript文件
    module: {
        rules:[
        //详细loader配置，不同文件配置不同loader
        ]
    },
    plugins: [
    //插件，执行更大更复杂的任务
    ],
    //打包模式
    mode: 'development'  //development:开发环境，production:生产环境

2.打包CSS和scss样式资源

用到的包：npm i style-loader css-loader -D // css的包
        npm install sass-loader node-sass -D //sass用的包
 1 /* 
 2 webpack.config.js webpack的配置文件
 3  作用: 指示 webpack 干那些活(当你运行 webpack 指令的时候,会加载里面的配置)
 4  所有构建工具都是基于ndoe.js平台运行的~模块化默认采用commonjs
 5 */
 6 
 7 // 使用node里的变量,用来拼接绝对路径
 8 const {resolve} = require('path')
 9 
10 module.exports={
11     // webpack配置
12     // 入口起点
13     entry:'./src/index.js',
14     // 输入
15     output:{
16         // 输入文件名
17         filename:'bulit.js',
18         // 输出路径
19         // __dirname node.js变量, 代表当前文件的目录绝对路径
20         path: resolve(__dirname,'build')
21     },
22     //loader的配置
23     module:{
24         rules:[
25             {
26                 test:/.css$/, // 匹配哪些文件 以css结尾的文件
27                 use:['style-loader','css-loader']
28             },
29             {
30                 test:/.scss$/,// 匹配以scss结尾的文件
31                 use:['style-loader','css-loader','sass-loader']
32             }
33         ]
34     },
35     // plugins的配置
36     plugins:[
37 
38     ],
39     // 模式
40     mode:'development',
41     // mode: 'production' 上线模式
42 }

3.打包html资源

/* 
用到的包 :  npm install html-webpack-plugin -D // 插件
webpack.config.js webpack的配置文件
 作用: 指示 webpack 干那些活(当你运行 webpack 指令的时候,会加载里面的配置)

 所有构建工具都是基于ndoe.js平台运行的~模块化默认采用commonjs
*/

// 使用node里的变量,用来拼接绝对路径
const {resolve} = require('path')

const HtmlWebPackPlugin = require('html-webpack-plugin')// 引入插件
module.exports={
    // webpack配置
    // 入口起点
    entry:'./src/index.js',
    // 输入
    output:{
        // 输入文件名
        filename:'bulit.js',
        // 输出路径
        // __dirname node.js变量, 代表当前文件的目录绝对路径
        path: resolve(__dirname,'build')
    },
    //loader的配置
    module:{
        rules:[
        ]
    },
    // plugins的配置
    plugins:[
        new HtmlWebPackPlugin({
            template:'./src/index.html'
        })
    ],
    // 模式
    mode:'development',
    // mode: 'production' 上线模式
}

4.打包图片资源url 和 img

// 用的的包： npm install url-loader file-loader -D  //解决url插入的图片
// cnpm i html-loader -D 命令 // 解决html插入的图片
const {resolve} = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')//引入html插件
const htmlPlguin = new HtmlWebPackPlugin({
    template:'./src/index.html'
})
module.exports={
    entry:'./src/index.js',
    output:{
        filename:'bulit.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test:/.scss$/,// 匹配以scss结尾的文件
                use:['style-loader','css-loader','sass-loader']
            },
            {
                // 问题: 默认处理不了html中img图片
                // 处理图片资源
                test:/.(jpg|png|gif)$/,
                loader:'url-loader',
                options:{
                   // 图片大于小于8kb,就会被转换成base64处理
                  //  优点:减少请求数量, (减轻服务器压力)
                  //  缺点:图片体积更大 (文件请求速度更慢)
                    limit: 8 *1024,
                  // 如果提示报错:是因为url-loader默认使用es6模块化解析,而html-loader引入图片是commonjs
                  // 解析时会出问题:[object Module]
                  // 解决方法:
                  esModule:false,
                  // 给图片进行重命名
                  // [hash:10]取图片的hash的前10位
                  // [ext]取文件原来扩展名
                  name:'[hash:10].[ext]'
                }
            },
            {
                // 处理html文件的img图片 (负责引用img,从而能被url-loader进行处理)
                test:/.html$/,
                loader:'html-loader'
            }
        ]
    },
    plugins:[htmlPlguin],
    mode:'development'
}

5.打包其他资源字体图标

// 用到的包： cnpm file-loader（果跑过打包图片的npm,就不用再跑了）
const {resolve} = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')// html插件
const htmlPlguin = new htmlWebpackPlugin({
    template:'./src/index.html'
})
module.exports= {
    entry:'./src/index.js',
    output:{
        filename:'built.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test:/.css$/,
                use:['style-loader','css-loader']
            },
            // 打包其他资源(除了html/js/css资源以外的资源)
            {
                // 排除html/js/css资源
                exclude:/.(css|html|js)$/,
                loader:'file-loader',
                options:{
                    name:'[hash:10].[ext]'//打包的名字取10位
                }
            }
        ]
    },
    plugins:[
        htmlPlguin // 使用那个插件
    ],
    mode:'development'
}

6.自动打包

/* 
1.运行  cnpm install webpack-dev-server -D   包
2.打开webpaack.config.js文件 添加配置如下:
3.运行   npx webpack-dev-server
*/
const {resolve} = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')// html插件
const htmlPlguin = new htmlWebpackPlugin({
    template:'./src/index.html'
})
module.exports= {
    entry:'./src/index.js',
    output:{
        filename:'built.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test:/.css$/,
                use:['style-loader','css-loader']
            },
            // 打包其他资源(除了html/js/css资源以外的资源)
            {
                // 排除html/js/css资源
                exclude:/.(css|html|js)$/,
                loader:'file-loader',
                options:{
                    name:'[hash:10].[ext]'//打包的名字取10位
                }
            }
        ]
    },
    plugins:[
        htmlPlguin
    ],
    mode:'development',
    
    // 开发服务器 devServer: 用来自动化 (自动编译, 自动打开浏览器, 自动刷新浏览器~~)
    // 特点: 只会在内存中编译打包, 不会有任何输出
    // 启动 devServer指令为: npx webpack-dev-server(npx一直向上找包)
    devServer:{
        // 项目构建后路径
        contentBase:resolve(__dirname,'build'),
        // 自动gzip压缩
        compress:true,
        // 端口号
        port:3000,
        // 自动打开浏览器
        open:true,
    }
}

7.开发环境配置

/* 开发环境配置:能让代码运行 */
/* 
 webpack 会将打包的结果输出出去
 npx webpack-dev-server 只会在内存中编译打包,没有输出
*/
const {resolve} = require('path') // 引入绝对路径path
const HtmlWebPackPlugin = require('html-webpack-plugin')//引入html插件
const htmlPlguin = new HtmlWebPackPlugin({
    template:'./src/index.html'
})
module.exports={
    entry:'./src/js/index.js',
    output:{
        filename:'js/built.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            { // 处理sass资源
               test:/.scss$/,
               use:['style-loader','css-loader','sass-loader']
            },
            { // 处理 css资源
                test:/.css$/,
                use:['style-loader','css-loader']
            },
            { // 处理图片资源
                test:/.(jpg|pmg|bmp|png|gif)$/,
                loader:'url-loader',
                options:{ 
                    limit:8 * 1024, // 处理图片的大小(超过8k)就转换为base64
                    name:'[hash:10].[ext]',// 处理后的名字长度
                    esModule:false, // 关闭es6模块化
                    outputPath:'img' // 输出到build文件里的 img文件夹里面
                }
            },
            { // 处理thml中img资源
                test:/.html$/,
                use:'html-loader'
            },
            { // 处理其他资源
                exclude:/.(html|scss|css|js|jpg|pmg|bmp|png|gif)$/,
                loader:'file-loader',
                options:{
                    name:'[hash:10].[ext]', // url-loader是file-loader的优化版本,可以处理base64
                    outputPath:'iconfont' // 输出到iconfont文件夹
                }
            }
        ]
    },
    // 引入 html插件
    plugins:[htmlPlguin],
    // 开发模式
    mode:'development',
    // 自动打包 + 优化代码
    devServer:{
        // 项目构建后路径
        contentBase:resolve(__dirname,'build'),
        // 自动gzip压缩
        compress:true,
        // 端口号
        port:3000,
        // 自动打开浏览器
        open:true,
    }
}

8.提取css成单独文件

// 运行:  cnpm i mini-css-extract-plugin -D
const {resolve} = require('path')
const htmlWebpackPlugins = require('html-webpack-plugin')// 引入html插件
const cssWebpackPlugins = require('mini-css-extract-plugin')// 引入单独css插件
module.exports ={
    entry:'./src/js/index.js',
    output:{
        filename:'js/built.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test:/.css$/,
                use:[
                    // 创建style标签, 将样式放入
                    // 'style-loader',
                    // 这个loader取代 style-loader; 作用: 提取js中的css成单独文件
                    cssWebpackPlugins.loader,
                    // 将css文件整合到js文件中
                    'css-loader'
                    ]
            }
        ]
    },
    plugins:[
        new htmlWebpackPlugins({
            template:'./src/index.html'
        }),
        new cssWebpackPlugins({
            filename:'css/built.css'
        })
    ],
    mode:'development'
}

9.css兼容性处理

// 运行  cnpm i postcss-loader postcss-preset-env  -D 命令
const {resolve} = require('path')
const htmlWebpackPlugins = require('html-webpack-plugin')// 引入html插件
const cssWebpackPlugins = require('mini-css-extract-plugin')// 引入单独css插件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')//压缩css
// 设置node.js环境变量
// process.env.NODE_ENV = 'development'// 为开发环境

module.exports ={
    entry:'./src/js/index.js',
    output:{
        filename:'js/built.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test:/.css$/,
                use:[
                    cssWebpackPlugins.loader,// 单独的css文件
                    'css-loader',
                  
                    // css兼容性处理:postcss--> postcss-loader postcss-preset-env
                    // 帮postcss找到package.json中的browserslist里面的配置,通过配置加载指定的css兼容性样式
                    /* 
                      "browserlist":{
                                    // 开发环境 --> 设置node环境变量:process.env.NODE_ENV = 'development'
                                        "development":[
                                        "last 1 chrome version",
                                        "last 1 firefox version",
                                        "last 1 safari version"
                                    ],
                                    // 生产环境:默认是看生产环境
                                    "production":[
                                        ">0.2%",
                                        "not dead",
                                        "not op_mini all"
                                    ]
                                    },
                    */
                    { 
                        loader:'postcss-loader',
                        options:{
                            ident:'postcss',
                            plugins:()=>[
                             // postcss的插件
                             require('postcss-preset-env')()
                            ]
                        }
                    },
                    ]
            }
        ]
    },
    plugins:[
        new htmlWebpackPlugins({
            template:'./src/index.html'
        }),
        new cssWebpackPlugins({
            filename:'css/built.css'
        }),
        // 压缩css
        new OptimizeCssAssetsWebpackPlugin()
    ],
    mode:'development'
}

10.js语法检查eslint

// 运行: cnpm i eslint-loader eslint eslint-config-airbnb eslint-plugin-import -D
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/build.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      /*
        语法检查： eslint-loader eslint
        只检查自己写的源代码，不检查第三方库
        设置检查规则：
          package.josn中 eslintConfig中设置
          "eslintConfig":{
              "extends":airbnb-base
          }
          推荐使用airbnb规则
          airbnb-->  eslint-config-airbnb eslint-plugin-import 
      */
      {
        test: /.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          // 自动修复 用户的格式
          fix: true,
        },
      },

    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  mode: 'development', // 生产环境下会自动压缩js代码
};

11.js兼容性处理

// 包： npm i babel-loader @babel/preset-env @babel/core   core-js -D
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/build.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
         /* 
      js兼容性处理：babel-loader @babel/preset-env @babel/core
        1.基本js兼容性处理 --> @babel/preset-env 
        问题：只能转换基本语法，promise等高级语法无法转换
        2.全部js兼容性处理  --> @babel/polyfill 在src里的index文件中导入即可
        问题：只需解决部分兼容性问题。但是将所有兼容性代码全部引入，体积过大
        3、需要做兼容性处理就做：按需加载 --> core-js
        // 最好是 1,3结合:
        // cnpm i babel-loader @babel/preset-env @babel/core core-js -D
     */
      {
        test: /.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
        // 预设：指示babel做怎样的兼容性处理
          presets: [
          [
            '@babel/preset-env',
            {
            // 按需加载
            useBuiltIns: 'usage',
            // 指定core-js版本
            corejs: {
              version: 3
            },
            // 指定兼容性做到哪个版本浏览器
            targets:{
              chrome: '60',
              firefox: '60',
              ie: '9',
              edge: '17',
              safari: '10'
            }
          }
        ]
      ],
    },
  },
],
},
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  mode: 'development', // 生产环境下会自动压缩js代码
};

12.js压缩

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/build.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
     
],
},
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  mode: 'production', // 生产环境下会自动压缩js代码
};

13.html压缩

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/build.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
     
],
},
plugins:[
  //html-webpack-plugin
  //功能：默认创建一个空的HTML，自动引入打包输出的所有资源（JS/Css）
  //需求：需要有结构的HTML文件
  new HtmlWebpackPlugin({
    // 复制./src/index.html文件，并自动引入打包输出的所有资源
    template: './src/index.html',
    // 压缩html
    minify: {
      // 移除空格
      collapseWhitespace: true,
      // 移除注释
      removeComments: true,
    },
  }
    )
],
  mode: 'production', // 生产环境下会自动压缩js代码
};

14.生产环境配置

const { resolve } = require('path');
const htmlWebpackPlugins = require('html-webpack-plugin')// 引入html插件
const cssWebpackPlugins = require('mini-css-extract-plugin')// 引入单独css插件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')//压缩css

// 定义node环境变量，决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production';

// 复用loader
const commonCssLoader = [
    cssWebpackPlugins.loader,// 单独的css文件
  'css-loader', {
    // 还需在package.json中定义browserslist
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => {
        require('postcss-preset-env')();
      },
    },
  },
]

/* 
正常来讲，一个文件只能被一个loader处理
当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
  先执行eslint再执行babel
*/
module.exports = {
  entry: './src/js/index.js', // 入口文件
  output: {// 出口文件
    filename: 'js/build.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          ...commonCssLoader
        ],
      },
      {
        test: /.scss$/,
        use: [
          ...commonCssLoader, // 引入loader
          'sass-loader',
        ],
      },
      { // 检查js语法eslint
        // 在package.josn中eslintConfig --> airbnb
        test: /.js$/,
        exclude: /node_module/,// 排除
        // 优先执行
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          fix: true // eslit自动帮你格式化js的不规范语法
        }
      },
      {
        // 在package.josn中eslintConfig --> airbnb
        test: /.js$/,
        exclude: /node_module/,// 排除
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                  // 按需加载
                useBuiltIns: 'usage',
                // 指定core-js版本
                corejs: { version: 3 },
                targets: {
                  chrome: '60',
                  firefox: '50',
                  ie: '9',
                  edge: '17',
                  safari: '10'
                },
              },
            ],
          ],
        }
      },
      {// 打包图片
        test: /.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          outputPath: 'imgs',//保存的路径
          esModule: false,//关闭es6模块化
          name:'[hash:10].[ext]',// 处理后的名字长度
        }
      },
      {// 打包html插入的图片
        test: /.html$/,
        loader: 'html-loader'
      },
      {// 打包其他文件, 除了上面打包过的
        exclude: /.(js|css|less|html|jpg|png|gif)$/,
        loader: 'file-loader',
        options: {
          outputPath: 'media',//保存的路径
          name:'[hash:10].[ext]',// 处理后的名字长度
        }
      }
    ],
  },
  plugins: [
    new cssWebpackPlugins({ // 打包成单独的css插件
      filename: 'css/build.css',
    }),
    new OptimizeCssAssetsWebpackPlugin(), // 压缩css插件
    new htmlWebpackPlugins({ // html插件
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,// 清除两边空白
        removeComments: true// 清除备注
      }
    })
  ],
  mode: 'production' // 环境模式
};

package.json

{
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/preset-env": "^7.10.2",
    "autoprefixer": "^9.8.0",
    "babel-loader": "^8.1.0",
    "core-js": "^3.6.5",
    "css-loader": "^3.5.3",
    "eslint": "^7.2.0",
    "eslint-config-airbnb": "^18.1.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.20.2",
    "file-loader": "^6.0.0",
    "html-loader": "^1.1.0",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.14.1",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.2.1",
    "url-loader": "^4.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  },
  "eslintConfig": {
    "extends": "airbnb-base"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
  "name": "Webpack",
  "version": "1.0.0",
  "main": "index.js",
  "dependencies": {},
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}