Hz零基础学习Webpack4.0

最新推荐文章于 2024-05-06 17:00:00 发布

章北海01

最新推荐文章于 2024-05-06 17:00:00 发布

阅读量179

点赞数

分类专栏： webpack4 文章标签： webpack4

本文链接：https://blog.csdn.net/qq_33274797/article/details/104237354

版权

webpack4 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、webpack


1.webpack是什么

	简介：webpack是一个JavaScript应用程序的静态模块打包器。
	

2.webpack有什么作用

	模块化打包：

		webpack会将项目的资源文件当成一个一个模块，模块之间会有依赖关系，
		webpack将会对这些有依赖关系的文件进行处理，让浏览器能够识别，
		最后将应用程序需要的每个模块打包成一个或者多个bundle

2、webpack环境配置和简单打包

1、安装node

node官网：https://nodejs.org/zh-cn/

2. 创建一个文件 npm init 生成package.json文件
   
npm init

{
  "name": "my-webpack",
  "version": "1.0.0",
  "description": "\"项目描述\"",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

3.安装webpack
  
    本地安装(为每一个项目安装一个webpack版本)
    npm install --save-dev webpack  webpack-cli
     
    全局安装(为所有的项目安装同一个webpack版本)
    npm install --global webpack webpack-cli

4.打包
    
    默认entry 入口:src/index.js
    默认output 出口:dist/main.js
    备注：现在创建的这个项目 没有src/index.js需要自己创建
    



5. 打包模式
   在package.json输出打包命令

   webpack --mode development(开发环境)
   
   webpack --mode production(生成环境)

   {
    "name": "my-webpack",
    "version": "1.0.0",
    "description": "\"项目描述\"",
    "main": "index.js",
    "scripts": {
        "dev": "webpack --mode development",
        "build": "webpack --mode production"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^4.41.5",
        "webpack-cli": "^3.3.10"
    }
}

6.npm run dev 或 npm run build 会生成dist/main.js打包后的文件.

3、使用webpack.config.js修改打包文件信息

默认的打包文件信息；

   入口:src/index.js
   出口:dist/main.js


当没有webpack.config.js文件存在时，将会使用默认的配置打包信息，
现在手动创建webpack.config.js文件修改打包信息。


const path = require('path');

module.exports = {
    /**
     * entry:加载的入口文件 不存在需要自己创建
     * 
    （1）path指文件打包后的存放路径
    （2）path.resolve()方法将路径或路径片段的序列处理成绝对路径
    （3）__dirname 表示当前文件所在的目录的绝对路径
    （4）filename是打包后文件的名称
    * 
    * */
    entry: './ldd/index.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: "bundle.js"
    }

}

4、入口entry和出口output进阶用法

1、单文件入口

const path = require('path');

module.exports = {
    entry: './ldd/index.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: "bundle.js"
    }

}


2.多文件入口

const path = require('path');

module.exports = {
    entry: ['./ldd/index.js', './ldd/index1.js'],
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: "bundle.js"
    }

}


1、2对应单出口

output: {
        path: path.resolve(__dirname, 'build'),
        filename: "bundle.js"
}





3.多入口:
 
const path = require('path');

module.exports = {
    entry: {
        lddOne: "./ldd/lddOne/index.js",
        lddTwo: "./ldd/lddTwo/index.js"
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        //[name] 会在build文件中 生成lddOne.js  lddTwo.jd
        filename: "[name].js"
    }

}


多出口
   
   output: {
        path: path.resolve(__dirname, 'build'),
        //[name] 会在build文件中 生成lddOne.js  lddTwo.jd
        filename: "[name].js"
    }

5、webpack-dev-server

1.webpack-dev-server

  webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。


webpack-dev-server 主要提供两个功能：
（1）为静态文件提供服务
（2）自动刷新和热替换(HMR)



使用：
  安装npm install --save-dev webpack-dev-server


配置webpack.config.js

const path = require('path');

module.exports = {
    entry: {
        app: "./ldd/index.js"
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        //[name] 会在build文件中 生成lddOne.js  lddTwo.jd
        filename: "[name].js"
    },

    devServer: {
        contentBase: './build', //设置服务器访问的基本目录
        host: 'localhost', //服务器ip地址
        port: 8080, //服务器端口号
        open: true //自动打开页面
    }

}


配置package.json文件

"start": "webpack-dev-server --mode development"

{
    "name": "my-webpack",
    "version": "1.0.0",
    "description": "\"项目描述\"",
    "main": "index.js",
    "scripts": {
        "dev": "webpack --mode development",
        "build": "webpack --mode production",
        "start": "webpack-dev-server --mode development"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^4.41.5",
        "webpack-cli": "^3.3.10",
        "webpack-dev-server": "^3.10.3"
    }
}

6、加载css

1.loader

   loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。


2.安装加载css文件的loader

  安装style-loader和css-loader

npm install --save-dev style-loader css-loader


3.配置loader
  在webpack.config.js中配置module中的rules

在 webpack 的配置中 loader 有两个目标：
 1. test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
 2. use 属性，表示进行转换时，应该使用哪个 loader。


   module: {

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

            }

        ]
    }



----总配置文件预览



const path = require('path');

module.exports = {
    entry: {
        app: "./ldd/index.js"
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        //[name] 会在build文件中 生成lddOne.js  lddTwo.jd
        filename: "[name].js"
    },

    devServer: {
        contentBase: './build', //设置服务器访问的基本目录
        host: 'localhost', //服务器ip地址
        port: 8080, //服务器端口号
        open: true //自动打开页面
    },

    module: {

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

            }

        ]
    }

}

7、编译less

1.less

css扩展语句。

2.安装loader
  
 安装less-loader 和 less

 npm install --save-dev less-loader less


3.配置loader

  module: {

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

8、编译sass

1.sass

css扩展语言。

2.安装loader

 安装sass-loader和node-sass

 npm install --save-dev sass-loader node-sass


3.配置loader

   module: {

        rules: [
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }

        ]
    }

9、图片处理

1.file-loader


 npm install --save-dev file-loader


2.编辑webpack.config.js

module: {

        rules: [
            {
                test: /\.(jpg|png|gif|jpeg)$/,
                use: "file-loader"
            }

        ]
    }

10、字体文件处理

1.file-loader

npm install --save-dev file-loader


2.编辑webpack.config.js

   module: {

        rules: [
            {
                test: /\.(ttf|woff|woff2|eot|svg)$/,
                use: "file-loader"
            }

        ]
    }

11、引入 Jquery第三方JS库

方式1
----------------------------------------

1.下载jquery.js离线文件

 jquery.min.js


2.编辑webpack.config.js文件

const path = require('path');
const webpack = require('webpack');


module.exports = {
    entry: {
        app: "./ldd/index.js"
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        //[name] 会在build文件中 生成lddOne.js  lddTwo.jd
        filename: "[name].js"
    },

    devServer: {
        contentBase: './build', //设置服务器访问的基本目录
        host: 'localhost', //服务器ip地址
        port: 8080, //服务器端口号
        open: true //自动打开页面
    },

    module: {

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

            }
        ]
    },
    
    //引入Jquery 
    resolve: {
        alias: {
            jQuery: path.resolve(__dirname, "ldd/jquery.min.js")
        }
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jQuery"
        })
    ]

}

//直接就$使用
import './index.css'
console.log("新建src/index.js  打包入门文件没有需要自己创建");
console.log($("#ldd"));

方式2
-------------------------------------------------


npm install jquery --save-dev


import $ from 'jquery'

12、bable-loader 编译ES6

1.babel

目前，ES6（ES2015）这样的语法已经得到很大规模的应用，它具有更加简洁、功能更加强大的特点，实际项目中很可能会使用采用了ES6语法的模块，但浏览器对于ES6语法的支持并不完善。为了实现兼容，就需要使用转换工具对ES6语法转换为ES5语法，babel就是最常用的一个工具

2.babel转化语法所需依赖项：
 babel-loader： 负责 es6 语法转化
 babel-core： babel核心包
 babel-preset-env：告诉babel使用哪种转码规则进行文件处理


3.安装依赖

  npm install babel-loader @babel/core @babel/preset-env --save-dev

4.配置webpack.config.js文件

  module: {

        rules: [
            {
                test: /\.js$/,
                //排除node_modules中的js文件，不将其转码
                exclude: /node_modules/,
                use: "babel-loader"
            }

        ]
  }


5.新建.babelrc文件

 {
    "presets": ["@babel/preset-env"]
 }





6.方式2【不创建.babelrc文件 直接在webpack.config.js配置】

{
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
}

13、html-webpack-plugin

1.html-webpack-plugin


 HtmlWebpackPlugin会自动为你生成一个HTML文件，根据指定的index.html模板生成对应的 html 文件。

2.安装插件

 npm install html-webpack-plugin --save-dev


3.配置webpack.config.js文件


plugins: [
        new HtmlWebpackPlugin({
            template: "./ldd/index.html",
            filename: 'index.html',
            minify: {
                minimize: true, //是否打包为最小值
                removeAttributeQuotes: true, //去除引号
                removeComments: true, //去除注释
                collapseWhitespace: true, //去除空格
                minifyCSS: true, //压缩html内的样式
                minifyJS: true, //压缩html内的JS
                removeEmptyElements: true //清理内容为空的元素
            },
            hash: true //引入产出资源时加上哈希值避免缓存
        })

 ]


完整文件:


const path = require('path');
const webpack = require('webpack');

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

module.exports = {
    entry: {
        app: "./ldd/index.js"
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        //[name] 会在build文件中 生成app.js
        filename: "[name].js"
    },

    devServer: {
        contentBase: './build', //设置服务器访问的基本目录
        host: 'localhost', //服务器ip地址
        port: 8080, //服务器端口号
        open: true //自动打开页面
    },

    module: {

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

        ]
    },


    plugins: [
        new HtmlWebpackPlugin({
            template: "./ldd/index.html",
            filename: 'index.html',
            minify: {
                minimize: true, //是否打包为最小值
                removeAttributeQuotes: true, //去除引号
                removeComments: true, //去除注释
                collapseWhitespace: true, //去除空格
                minifyCSS: true, //压缩html内的样式
                minifyJS: true, //压缩html内的JS
                removeEmptyElements: true //清理内容为空的元素
            },
            hash: true //引入产出资源时加上哈希值避免缓存
        })

    ]

}

14、提取分离CSS

将入口文件中引入css文件分离打包出来


方式1：
     使用ExtractTextPlugin插件(旧版)

     npm install --save-dev extract-text-webpack-plugin@next

     
     编辑webpack.config.js

     const ExtractTextPlugin = require('extract-text-webpack-plugin');


     module: {

        rules: [{
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                //fallback:编译后用什么loader来提取css文件
                fallback: "style-loader",
                use: "css-loader"
            })

        }]
    },


    new ExtractTextPlugin("./css/index.css")


完整配置文件:

const path = require('path');
const webpack = require('webpack');

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

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        app: "./ldd/index.js"
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        //[name] 会在build文件中 生成lddOne.js  lddTwo.jd
        filename: "[name].js"
    },

    devServer: {
        contentBase: './build', //设置服务器访问的基本目录
        host: 'localhost', //服务器ip地址
        port: 8080, //服务器端口号
        open: true //自动打开页面
    },

    module: {

        rules: [{
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                //fallback:编译后用什么loader来提取css文件
                fallback: "style-loader",
                use: "css-loader"
            })

        }]
    },


    plugins: [
        new HtmlWebpackPlugin({
            template: "./ldd/index.html",
            filename: 'index.html',
            minify: {
                minimize: true, //是否打包为最小值
                removeAttributeQuotes: true, //去除引号
                removeComments: true, //去除注释
                collapseWhitespace: true, //去除空格
                minifyCSS: true, //压缩html内的样式
                minifyJS: true, //压缩html内的JS
                removeEmptyElements: true //清理内容为空的元素
            },
            hash: true //引入产出资源时加上哈希值避免缓存
        }),

        new ExtractTextPlugin("./css/index.css")

    ]

}

将入口文件中引入css文件分离打包出来

方式2:

 ----------------------------------------------
 使用mini-css-extract-plugin插件


1.安装

npm install --save-dev mini-css-extract-plugin


2.配置webpack.config.js文件


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


 module: {

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

        }]
 }

 new MiniCssExtractPlugin({
            filename: "./css/index.css"
 })


完成配置文件:


const path = require('path');
const webpack = require('webpack');

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


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


module.exports = {
    entry: {
        app: "./ldd/index.js"
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: "[name].js"
    },

    devServer: {
        contentBase: './build', //设置服务器访问的基本目录
        host: 'localhost', //服务器ip地址
        port: 8080, //服务器端口号
        open: true //自动打开页面
    },

    module: {

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

        }]
    },


    plugins: [
        new HtmlWebpackPlugin({
            template: "./ldd/index.html",
            filename: 'index.html',
            minify: {
                minimize: true, //是否打包为最小值
                removeAttributeQuotes: true, //去除引号
                removeComments: true, //去除注释
                collapseWhitespace: true, //去除空格
                minifyCSS: true, //压缩html内的样式
                minifyJS: true, //压缩html内的JS
                removeEmptyElements: true //清理内容为空的元素
            },
            hash: true //引入产出资源时加上哈希值避免缓存
        }),


        new MiniCssExtractPlugin({
            filename: "./css/index.css"
        })

    ]

}

15、压缩优化css结构

1.使用optimize-css-assets-webpack-plugin插件


安装:

  npm install --save-dev optimize-css-assets-webpack-plugin

2.编辑webpack.config.js


const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")



//压缩优化css结构

new OptimizeCSSAssetsPlugin({
            assetNameRegExp: /\.css$/g, //正则表达式，用于匹配需要优化或者压缩的资源名。默认值是 /\.css$/g
            cssProcessor: require("cssnano"), //用于压缩和优化CSS 的处理器，默认是 cssnano.
            cssProcessorOptions: { //传递给cssProcessor的插件选项，默认为{}
                preset: ['default',
                    { //discardComments:去除注释
                        discardComments: { removeAll: true }
                    }
                ]
            },
            canPrint: true //表示插件能够在console中打印信息，默认值是true

 })



完整配置文件:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')


const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")

module.exports = {
    entry: {
        app: "./ldd/index.js"
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: "[name].js"
    },

    devServer: {
        contentBase: './build', //设置服务器访问的基本目录
        host: 'localhost', //服务器ip地址
        port: 8080, //服务器端口号
        open: true //自动打开页面
    },

    module: {

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

        }]
    },


    plugins: [
        new HtmlWebpackPlugin({
            template: "./ldd/index.html",
            filename: 'index.html',
            minify: {
                minimize: true, //是否打包为最小值
                removeAttributeQuotes: true, //去除引号
                removeComments: true, //去除注释
                collapseWhitespace: true, //去除空格
                minifyCSS: true, //压缩html内的样式
                minifyJS: true, //压缩html内的JS
                removeEmptyElements: true //清理内容为空的元素
            },
            hash: true //引入产出资源时加上哈希值避免缓存
        }),


        new MiniCssExtractPlugin({
            filename: "./css/index.css"
        }),


        //压缩优化css结构

        new OptimizeCSSAssetsPlugin({
            assetNameRegExp: /\.css$/g, //正则表达式，用于匹配需要优化或者压缩的资源名。默认值是 /\.css$/g
            cssProcessor: require("cssnano"), //用于压缩和优化CSS 的处理器，默认是 cssnano.
            cssProcessorOptions: { //传递给cssProcessor的插件选项，默认为{}
                preset: ['default',
                    { //discardComments:去除注释
                        discardComments: { removeAll: true }
                    }
                ]
            },
            canPrint: true //表示插件能够在console中打印信息，默认值是true

        })

    ]

}

16、webpack拷贝静态文件

1.安装插件

npm install --save-dev copy-webpack-plugin


2.编辑webpack.config.js


const CopyWebpackPlugin = require('copy-webpack-plugin')



//copy静态文件到打包后的文件
new CopyWebpackPlugin([{
    from: __dirname + '/static/',
    to: __dirname + '/build/static/'

}])

17、clean-webpack-plugin使用

1.作用:

  当我们修改带hash的文件并进行打包时，每打包一次就会生成一个新的文件，而旧的文件并没有删除。
  为了解决这种情况，我们可以使用clean-webpack-plugin在打包之前将文件先清除，之后再打包出最新的文件


2.安装

  npm install --save-dev clean-webpack-plugin


3.编辑webpack.config.js文件


const { CleanWebpackPlugin } = require('clean-webpack-plugin')

output: {
        path: path.resolve(__dirname, 'build'),
        //输出文件加上hash
        filename: "[name][hash].js"
},

//删除打包之前的文件重新打包
new CleanWebpackPlugin()




完整配置:



const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
const CopyWebpackPlugin = require('copy-webpack-plugin')

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    entry: {
        app: "./ldd/index.js"
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: "[name][hash].js"
    },

    devServer: {
        contentBase: './build', //设置服务器访问的基本目录
        host: 'localhost', //服务器ip地址
        port: 8080, //服务器端口号
        open: true //自动打开页面
    },

    module: {

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

        }]
    },


    plugins: [


        new HtmlWebpackPlugin({
            template: "./ldd/index.html",
            filename: 'index.html',
            minify: {
                minimize: true, //是否打包为最小值
                removeAttributeQuotes: true, //去除引号
                removeComments: true, //去除注释
                collapseWhitespace: true, //去除空格
                minifyCSS: true, //压缩html内的样式
                minifyJS: true, //压缩html内的JS
                removeEmptyElements: true //清理内容为空的元素
            },
            hash: true //引入产出资源时加上哈希值避免缓存
        }),


        new MiniCssExtractPlugin({
            filename: "./css/index.css"
        }),


        //压缩优化css结构

        new OptimizeCSSAssetsPlugin({
            assetNameRegExp: /\.css$/g, //正则表达式，用于匹配需要优化或者压缩的资源名。默认值是 /\.css$/g
            cssProcessor: require("cssnano"), //用于压缩和优化CSS 的处理器，默认是 cssnano.
            cssProcessorOptions: { //传递给cssProcessor的插件选项，默认为{}
                preset: ['default',
                    { //discardComments:去除注释
                        discardComments: { removeAll: true }
                    }
                ]
            },
            canPrint: true //表示插件能够在console中打印信息，默认值是true

        }),

        //copy静态文件到打包后的文件
        new CopyWebpackPlugin([{
            from: __dirname + '/static/',
            to: __dirname + '/build/static/'

        }]),
        //删除打包之前的文件重新打包
        new CleanWebpackPlugin()


    ]

}

18、模块热部署

1.模块热部署替换页面重新刷新加载更新内容


  模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块，
  而无需重新加载整个页面。主要是通过以下几种方式，来显著加快开发速度：
  
  	保留在完全重新加载页面时丢失的应用程序状态。
  	只更新变更内容，以节省宝贵的开发时间。
  	调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。



2.配置webpack.config.js

--- hot: true //开启热部署

 
devServer: {
        contentBase: './build', //设置服务器访问的基本目录
        host: 'localhost', //服务器ip地址
        port: 8080, //服务器端口号
        open: true, //自动打开页面
        hot: true //开启热部署
},


plugins: [

        //热部署插件
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
]


注意：热部署针对style-loader

{
       test: /\.css$/,
       use: ['style-loader', 'css-loader']

}

19、配置开发环境与生成环境

1. 开发环境和生产环境的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载或热模
块替换能力 和 localhost server。而在生产环境中，我们的目标则转向于关注更小的 bundle，以及资源的
优化，以改善加载时间。所以我们通常建议为每个环境编写彼此独立的 webpack 配置。


2.使用webpack-merge合并插件

npm install --save-dev webpack-merge


3.拆分文件

 创建文件夹config 创建webpack.base.conf.js webpack.dev.conf.js webpack.prod.js



4.webpack.base.conf.js
   是放一些我们公用的配置，比如入口entry、出口output、常用loader以及插件等。

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



   module.exports = {
       entry: {
           //？？？？
           app: "./ldd/index.js"
       },
       output: {
           path: path.resolve(__dirname, '../build'),
           filename: "[name][hash].js"
       },

       module: {

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

               },

               {
                   test: /\.(jpg|png|gif|jpeg)$/,
                   use: "file-loader"
               }
           ]
       },

       plugins: [
           new HtmlWebpackPlugin({
               //????
               template: "./ldd/index.html",
               filename: 'index.html',
               minify: {
                   minimize: true, //是否打包为最小值
                   removeAttributeQuotes: true, //去除引号
                   removeComments: true, //去除注释
                   collapseWhitespace: true, //去除空格
                   minifyCSS: true, //压缩html内的样式
                   minifyJS: true, //压缩html内的JS
                   removeEmptyElements: true //清理内容为空的元素
               },
               hash: true //引入产出资源时加上哈希值避免缓存
           })
       ]

   }


5.webpack.dev.conf.js

是在开发环境上的配置，比如devServer配置、模块热替换等方便开发的配置
    
   注意:引入const merge = require('webpack-merge');进行合并base


  
   const path = require('path');
   const webpack = require('webpack');
   const merge = require('webpack-merge');
   const webpackBaseConf = require('./wepack.base.conf.js')
   const ExtractTextPlugin = require('extract-text-webpack-plugin');

   module.exports = merge(webpackBaseConf, {

       devServer: {
           contentBase: '../build/', //设置服务器访问的基本目录
           host: 'localhost', //服务器ip地址
           port: 8080, //服务器端口号
           open: true, //自动打开页面
           hot: true //开启热部署
       },


       plugins: [

           //热部署插件
           new webpack.NamedModulesPlugin(),
           new webpack.HotModuleReplacementPlugin(),

           //分类css
           new ExtractTextPlugin("./css/index.css")

       ]

   })


6.webpack.prod.conf.js

  在生产环境上的配置，比如提取分离css、压缩css和js等


   const path = require('path');
   const CopyWebpackPlugin = require('copy-webpack-plugin')
   const { CleanWebpackPlugin } = require('clean-webpack-plugin')
   const merge = require('webpack-merge');
   const webpackBaseConf = require('./wepack.base.conf.js')




   module.exports = merge(webpackBaseConf, {

       plugins: [
           //copy静态文件到打包后的文件
           new CopyWebpackPlugin([{
               from: path.resolve(__dirname, '../static/'),
               to: path.resolve(__dirname, '../build/static/')

           }]),
           //删除打包之前的文件重新打包
           new CleanWebpackPlugin()


       ]

   })


6.修改package.json


--config 指定使用哪个配置文件

"scripts": {
        "dev": "webpack --mode development --config ./config/webpack.dev.conf.js",
        "build": "webpack --mode production --config ./config/webpack.prod.conf.js",
        "start": "webpack-dev-server --mode development --config ./config/webpack.dev.conf.js"
    },

20、resolve

1.module.exports中resolve配置

function resolve(dir) {
       return path.join(__dirname, '..', dir)
}



resolve: {
           //引入不写后缀名 根据以下数组后缀名匹配
           extensions: ['.js', '.vue', '.json'],
           //路径别名 
           alias: {
               '@': resolve('src'),
           }
},



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


   function resolve(dir) {
       return path.join(__dirname, '..', dir)
   }



   module.exports = {
       entry: {
           //？？？？
           app: "./ldd/index.js"
       },
       output: {
           path: path.resolve(__dirname, '../build'),
           filename: "[name][hash].js"
       },

       resolve: {
           //引入不写后缀名 根据以下数组后缀名匹配
           extensions: ['.js', '.vue', '.json'],
           //路径别名
           alias: {
               '@': resolve('src'),
           }
       }
        
       ...
       ...

}

章北海01

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Hz零基础学习Webpack4.0

1、webpack1.webpack是什么简介：webpack是一个JavaScript应用程序的静态模块打包器。 2.webpack有什么作用模块化打包： webpack会将项目的资源文件当成一个一个模块，模块之间会有依赖关系， webpack将会对这些有依赖关系的文件进行处理，让浏览器能够识别，最后将应用程序需要的每个模块打包成一个或者多个bundle...
复制链接

扫一扫