1.打包样式资源

loader名称: css-loader和style-loader、less、less-loader
安装方式: npm i css-loader style-loader less less-loader -D
配置方式:

{
  //匹配哪些文件
  test:/\.css$/,
  //使用哪些loader进行处理
  use:[
      //use数组中loader执行顺序，从右到左 从下到上 依次执行
      //创建style标签将js中的样式资源插入进去，添加到head中生效
      'style-loader',
      //将css文件一字符串的形式变成一个commonjs模块加载到js中，里面内容是样式字符串
      'css-loader'
  ]
},
{
  test:/\.less$/,
  use:[
      'style-loader',
      'css-loader',
      'less-loader'
  ]
},

2. 打包HTML资源

插件名称:html-webpack-plugin
安装命令: npm i html-webpack-plugin -D
插件引入: const HtmlWebpackPlugin = require('html-webpack-plugin')
插件配置:

  new HtmlWebpackPlugin({
      //复制‘./src/index.html’文件，并自动引入打包输出的所有资源
      template:'./src/index.html'
  }),

3. 打包图片资源

处理图片 1.1 loader: url-loader和file-loader 1.2 安装命令: npm i url-loader file-loader -D 1.2 配置方式:

{
     test:/\.(jpg|png|gif)$/,
     //下载url-loader file-loader
     loader: 'url-loader',
     options:{
         //图片大小小于8kb，就会被base64处理
         //优点：减少请求数量（减轻服务器压力）
         //缺点: 图片体积会更大，（文件请求速度更慢）
         limit:8*1024,
         //问题:因为url-loader默认使用es6模块化解析,而html-loader引入图片是commonjs
         //解析时会出问题:[object module]
         //解决:关闭url-loader的es6模块化，使用commonjs解析
         esModel:false,
         //[hash:10]取图片的hash的前10位
         //ext:取文件原来的扩展名
         name:'[hash:10].[ext]'
     }
},

处理html中的img引用的图片资源 2.1 loader名称：html-loader 2.2 安装命令: npm i html-loader -D 2.2 配置方式:

{
    test:/\.html$/,
    //处理html文件的img图片（负责引入img,从而能被url-loader进行处理）
    loader:'html-loader'
}

4.打包其它资源

loader名称: file-loader
安装命令: npm i file-loader -D
配置方式:

{
   //打包其它资源（除了html/js/css资源以外的资源）
   exclude:/\.(css|js|html)$/,
   loader:'file-loader',
   options:{
       name:'[hash:4].[ext]'
   }
}

5. DevServer

插件： webpack-dev-server
安装命令: npm i webpack-dev-server -D
配置方式:

//开发服务器devServer:用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
//特点:只会在内存中编译打包，不会有任何输出
//启动devServer指令为:npx webpack-dev-server
devServer:{
    //项目路径
    contentBase:resolve(__dirname,'build'),
    //启动gzip压缩
    compress:true,
    //端口号
    port:3000,
    //自动打开浏览器
    open:true,
}

6. 开发环境配置:

const {resolve} = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
module.exports = {
    entry:'./src/js/index.js',
    output:{
        filename:'js/built.js',
        path:resolve(__dirname,'build'),
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/\.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ]
            },
            {
                test:/\.(gif|png|jpg)$/,
                loader:'url-loader',
                options:{
                    limit:8*1024,
                    esModel:false,
                    name:'[hash:10].[ext]',
                    outputPath:"imgs"
                }
            },
            {
                test:/\.html$/,
                loader:'html-loader'
            },
            {
                exclude:/\.(less|gif|png|jpg|html|css|js)$/,
                loader:'file-loader',
                options:{
                    name:'[hash:10].[ext]',
                    outputPath:"media"
                }
            }
        ]
    },
    plugins:[
        new HtmlWebPackPlugin({
            template:'./src/index.html',
        })
    ],
    mode:'development',
    devServer:{
        contentBase:resolve(__dirname,'build'),
        compress:true,
        port:3000,
        open:true
    }
}

7. 提取css成单独文件

插件名成: mini-css-extract-plugin
安装命令: npm i mini-css-extract-plugin
插件引入： const MiniCssExtractPlugin = require('mini-css-extract-plugin')
插件配置:

 new MiniCssExtractPlugin({
    //打包名称和路径
    filename:'css/built.css'
}),

同时修改loader中的style为MiniCssExtractPlugin的loader,如下:

 module:{
    rules:[
        {
            test:/\.css$/,
            use:[
                MiniCssExtractPlugin.loader,
                //'style-loader',
                'css-loader'
            ]
        },
        {
            test:/\.less$/,
            use:[
                //'style-loader',
                MiniCssExtractPlugin.loader,
                'css-loader',
                'less-loader'
            ]
        },
    ]
},

8. css兼容性处理

loader名称: postcss-loader
安装命令: npm i postcss-loader -D
需要结合css loader一起使用
配置方式:

{
    test:/\.css$/,
    use:[
        MiniCssExtractPlugin.loader,
        //'style-loader',
        'css-loader',
        /**
         * css兼容性处理：postcss-->postcss-loader postcss-preset-env
         * 
         * 帮助postcss找到package.json中brewlist里面的配置，通过配置加载指定的css兼容性样式
         * 
         *  "browserslist":{
         *      //开发环境-->设置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’
        {
            loader:'postcss-loader',
            options:{
                ident:'postcss',
                plugins: () => [
                    //postcss的插件
                    require('postcss-preset-env')()
                ]
            }
        }
    ]
},

同时需要在packages.json中增加的配置如下:

 "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

要使其在开发环境中生效，需要设置node环境为developement,在webpack.config.js中设置：

  process.env.NODE_ENV = 'development'

9. 压缩css

所用的插件: optimize-css-assets-webpack-plugin
安装命令: npm i optimize-css-assets-webpack-plugin -D
插件引入： const OptimizeCssAssetsWebpaclPlugin = require('optimize-css-assets-webpack-plugin')
配置方式::

  new OptimizeCssAssetsWebpaclPlugin()

10. js语法检查

插件名称: eslint-loader、eslint 、eslint-config-airbnb-base 、 eslint-plugin-import
安装命令: npm i eslint eslint-loader eslint-config-airbnb-base eslint-plugin-import -D
配置： 3.1 规则中使用:

 /**
  * 语法检查： eslint-loader ,eslint-loader依赖eslint
  *  注意：只检查自己写的源代码，第三库是不用检查的
  *  设置检查规则： 
  *   package.json中eslintConfig中配置
  *       airbnb --> eslint-config-airbnb-base eseslint-plugin-import
  */
 {
      test: /\.js$/,
      loader: 'eslint-loader',
      exclude: /node_modules/,//排除node_modules
      options: {
          fix: true
      }
 }

3.2 在package.json中增加:

"eslintConfig": {
    "extends": "airbnb-base",
    "env": {
      "browser": true
    }
  }

11.js 兼容性处理

所用的loader: babel-loader @babel/preset-env @babel/core
安装命令: npm i babel-loader @babel/preset-env @babel/core -D
配置:

/**
 * js兼容性处理: babel-loader @babel/preset-env @babel/core
 *      1. 基本js兼容性处理---> @bebel/preset-env
 *             问题: 只能转换基本语法，如promise不能转换
 *      2. 全部js兼容性处理--> @babel/polyfill
 */
{
    test:/\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    options: {
        //预设 ：babel做怎么样的兼容性处理
        presets: ['@babel/preset-env']
    }
}

@babel/polyfill 的使用
下载: npm i @babel/polyfill -D
引用：在入口js源代码里面使用import 引入: import '@babel/polyfill' 问题：我只需要解决部分兼容性问题，但是会把所有的兼容性处理全部引入，体积太大
按需加载需要做兼容性处理的就做: 按需加载 ---> core-js 7.1 安装：npm i core-js -D 7.2 配置:

{
    test:/\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    options: {
        //预设 ：babel做怎么样的兼容性处理
        // 预设：指示babel做怎么样的兼容性处理
        presets: [
          [
            '@babel/preset-env',
            {
              // 按需加载
              useBuiltIns: 'usage',
              // 指定core-js版本
              corejs: {
                version: 3
              },
              // 指定兼容性做到哪个版本浏览器
              targets: {
                chrome: '60',
                firefox: '60',
                ie: '9',
                safari: '10',
                edge: '17'
              }
            }
          ]
        ]
    }
}

12.js压缩

只需要把mode修改为production即可

13.html压缩

使用HtmlWebpackPlugin即可，如下:

new HtmlWebpackPlugin({
    template: './src/index.html',
    minify:{
      //移出空格
      collapseWhitespace: true,
      //移除注释
      removeComments: true
    }
})

14. 生产环境配置

const {resolve} = require('path')

const HtmlWebPackPlugin =  require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpaclPlugin  = require('optimize-css-assets-webpack-plugin')
//定义nodejs的环境变量：决定使用browserslist的哪个环境
process.env.NODE_ENV = 'development';
//复用loader
const commonCssLoader = [
    MiniCssExtractPlugin.loader,
    'css-lodaer',
    {
        //还需要在package.json中定义browserslist
        loader: 'postcss-loader',
        options: {
            ident: 'postcss',
            plugins: () => [
                require('postcss-preset-env')()
            ]
        }
    }
]
module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname,'build')
    },
    module: {
        rules:[
            {
                test:/\.css$/,
                use: [...commonCssLoader]
            },
            {
                test: /\.less$/,
                use: [...commonCssLoader,'less-loader']
            },
            //正常来讲，一个文件只能被一个loader处理；
            //当一个文件要被多个loader处理，那么一定要指定loader的执行先后顺序；
            // 先执行eslint再执行babel
            {
                //在package.json中来添加eslintConfig --> airbnb
                test:/\.js$/,
                exclude: /node_modules/,
                loader: 'eslint-loader',
                //优先执行
                enforce:'pre',
                options: {
                    fix: true
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    presets:[
                        [
                            '@babel/preset-env',
                            {
                                useBuiltIns:'usage',
                                corejs: {version:3},
                                targets: {
                                    chrome: '60',
                                    firefox: '50'
                                }
                            }

                        ]
                    ]
                }
            },
            {
                test:/\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    limit: 8*1024,
                    //使用来html-loader一定要关闭url-loader的esModel
                    esModule: false,
                    name: '[hash:10].[ext]',
                    outputPath: 'imgs'
                }
            },
            {
                test: /\.html$/,
                loader: 'html-loader',
            },
            {
                exclude:/\.(js|css|less|html|jpg|png|gif)$/,
                loader: 'file-loader',
                options: {
                    outputPath: 'media'
                }
            }
        ]
    },
    plugins:[
        new HtmlWebPackPlugin({
            template: './src/index.html',
            minify: {
                collapseWhitespace: true,
                removeComments: true
            }
        }),
        new MiniCssExtractPlugin({
            filename:'css/built.css'
        }),
        new OptimizeCssAssetsWebpaclPlugin()
    ],
    mode: 'production'
}

15. 开发环境优化


/**
 * HMR: hot module replacement 热模块替换/模块热替换
 *  作用： 一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块）
 *      极大提升构建速度
 *      
 *      样式文件 ：可以使用HMR功能：因为style-loader内部实现了～
 *      js文件：默认没有HMR功能--->需要修改js代码，添加支持HMR功能的代码
 *             注意:HMR功能对js的处理，只能处理非入口js文件的其它文件
 *      HTML文件: 默认也不能使用HMR功能，同时导致HTML不能热更新了～（不用做HMR功能）
 *              解决: 修改entry入口，入口html也引入
 */
const {resolve} = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: ['./src/js/index.js','./src/index.html'],
    output:{
        filename:'js/built.js',
        path:resolve(__dirname,'build'),
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/\.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ]
            },
            {
                test:/\.(gif|png|jpg)$/,
                loader:'url-loader',
                options:{
                    limit:8*1024,
                    esModel:false,
                    name:'[hash:10].[ext]',
                    outputPath:"imgs"
                }
            },
            {
                test:/\.html$/,
                loader:'html-loader'
            },
            {
                exclude:/\.(less|gif|png|jpg|html|css|js)$/,
                loader:'file-loader',
                options:{
                    name:'[hash:10].[ext]',
                    outputPath:"media"
                }
            }
        ]
    },
    plugins:[
        new HtmlWebPackPlugin({
            template:'./src/index.html',
        })
    ],
    mode:'development',
    devServer:{
        contentBase:resolve(__dirname,'build'),
        compress:true,
        port:3000,
        open:true,
        //开启HMR功能
        //当修改了webpack配置，新配置要想生效，必须要重启webpack服务
        hot: true
    }
}

16.source-map

source-map: 一种提供源代码到构建后代码映射技术（如构建后代码出错了，通过映射关系可以追踪源代码的错误）
[inline-|hidden-|eval-][nosources-][cheap-[module-]]souce-map

inline-source-map: 内联
    只生成一个内联source-map
    错误代码准确信息和源代码准确位置

hidden-source-map: 外部
    能够提示到错误的错误原因，但是没有错误位置，不能追踪到源代码的错误，只能提示到构建后代码的错误位置

eval-source-map: 内联，
    每一个文件都生成对应的source-map,都在eval
    错误代码准确信息和源代码准确位置
    多了一个hash值

nosources-source-map: 外部
    能够提示到错误的错误原因，但是没有任何源代码信息

cheap-source-map: 外部
    错误代码准确信息和源代码准确位置，但是错误位置只精确到行，不精确到列

cheap-module-source-map: 外部
    错误代码准确信息和源代码准确位置，但是错误位置只精确到行，不精确到列
    会将loader和source map加入

source-map：外部
    错误代码准确信息和源代码准确位置

内联和外部的区别：1.外部生成了文件，内联是没有的；2.内联构建速度更快

开发环境：速度快，调试更友好
    速度快(eval>inline>cheap>...)
        eval-cheap-source-map
        eval-source-map
    调试更友好
        source-map
        cheap-module-source-map
        cheap-source-map
    
        -->eval-source-map /eval-cheap-module-sourcemap
生产环境：源代码要不要隐藏？调试要不要更友好
    内联会让代码体积非常大，所以再生产环境不用内联
    nosources-source-map 全部隐藏
    hidden-source-map   只隐藏源代码，会提示构建后代码错误

    -->source-map /cheap-module-source-map

17. oneof

在roles种使用oneof,需要注意事项:

一下loader只会匹配一个
注意:不能让两个loader处理同一种类型的文件
正常来讲，一个文件只能被一个loader处理；
当一个文件要被多个loader处理，那么一定要指定loader的执行先后顺序；
先执行eslint再执行babel 代码如下：

rules:[
     {
         //在package.json中来添加eslintConfig --> airbnb
         test:/\.js$/,
         exclude: /node_modules/,
         loader: 'eslint-loader',
         //优先执行
         enforce:'pre',
         options: {
             fix: true
         }
     },
     {
         //一下loader只会匹配一个
         //注意:不能让两个loader处理同一种类型的文件
         oneof: [
             {
                 test:/\.css$/,
                 use: [...commonCssLoader]
             },
             {
                 test: /\.less$/,
                 use: [...commonCssLoader,'less-loader']
             },
             //正常来讲，一个文件只能被一个loader处理；
        /当一个文件要被多个loader处理，那么一定要指定loa  行先后顺序；
             // 先执行eslint再执行babel
             {
                 test: /\.js$/,
                 exclude: /node_modules/,
                 loader: 'babel-loader',
                 options: {
                     presets:[
                         [
                             '@babel/preset-env',
                             {
                                 useBuiltIns:'usage',
                                 corejs: {version:3},
                                 targets: {
                                     chrome: '60',
                                     firefox: '50'
                                 }
                             }
  
                         ]
                     ]
                 }
             },
             {
                 test:/\.(jpg|png|gif)$/,
                 loader: 'url-loader',
                 options: {
                     limit: 8*1024,
                /使用来html-loader一定要关闭url-loader的e l
                     esModule: false,
                     name: '[hash:10].[ext]',
                     outputPath: 'imgs'
                 }
             },
             {
                 test: /\.html$/,
                 loader: 'html-loader',
             },
             {
                 exclude:/\.(js|css|less|html|jpg|png|gif)$/,
                 loader: 'file-loader',
                 options: {
                     outputPath: 'media'
                 }
             }
         ]
     }
]

18.缓存

在babel-loader中开启缓存

{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    options: {
        presets:[
            [
                '@babel/preset-env',
                {
                    useBuiltIns:'usage',
                    corejs: {version:3},
                    targets: {
                        chrome: '60',
                        firefox: '50'
                    }
                }
        
            ]
        ],
        //开启babel缓存
        //第二次构建时，会读取之前的缓存
        cacheDirectory: true
    }
},

文件缓存

Name		Name	Last commit message	Last commit date
Latest commit History 4 Commits
01.webpack简介		01.webpack简介
02.webpack初体验		02.webpack初体验
03.打包样式资源		03.打包样式资源
04.打包html资源		04.打包html资源
05.打包图片资源		05.打包图片资源
06.打包其它资源		06.打包其它资源
07.devServer		07.devServer
08.开发环境配置		08.开发环境配置
09.提取css成单独文件		09.提取css成单独文件
10.css兼容性处理		10.css兼容性处理
11.压缩css		11.压缩css
12.js语法检查		12.js语法检查
13.js的兼容性处理		13.js的兼容性处理
14.js压缩		14.js压缩
15.html压缩		15.html压缩
16.生产环境配置		16.生产环境配置
17.优化配置介绍		17.优化配置介绍
18.HMR		18.HMR
19.source-map		19.source-map
20.oneof		20.oneof
21.缓存		21.缓存
SSR		SSR
.gitignore		.gitignore
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

1.打包样式资源

2. 打包HTML资源

3. 打包图片资源

4.打包其它资源

5. DevServer

6. 开发环境配置:

7. 提取css成单独文件

8. css兼容性处理

9. 压缩css

10. js语法检查

11.js 兼容性处理

12.js压缩

13.html压缩

14. 生产环境配置

15. 开发环境优化

16.source-map

17. oneof

18.缓存

About

Releases

Packages

Languages

zqdeveloper/webpack

Folders and files

Latest commit

History

Repository files navigation

1.打包样式资源

2. 打包HTML资源

3. 打包图片资源

4.打包其它资源

5. DevServer

6. 开发环境配置:

7. 提取css成单独文件

8. css兼容性处理

9. 压缩css

10. js语法检查

11.js 兼容性处理

12.js压缩

13.html压缩

14. 生产环境配置

15. 开发环境优化

16.source-map

17. oneof

18.缓存

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages