webpack基础配置

Posted 2020-12-01 qimiaojiyi

webpack

入门

1. 下载webpack和webpack-cli包（yarn add webpackwebpack-cli）.

2. 在package.json文件中需要加上”scripts“：{"build":"webpack"},声明运行的命令与使用的工具。运行yarn build，打包生成index.js文件。

3. 自动打包生成index.html文件。安装html-webpack-plugin插件。创建webpack.config.js文件。

   const HtmlWebpackPlugin = require(‘html-webpack-plugin‘)
   module.exports={
   //入口文件
       entry:‘./src/index.js‘,//注意自己的路径
       plugins:[
           new HtmlWebpackPlugin()
       ]
   }

    

    

基础

入口文件——EntryPoints

单入口文件时：entry:‘./src/index.js‘。

多入口文件时：entry：{home:‘./src/home.js‘,about:‘./src/about.js‘}。

多入口的好处：在项目中不同页面可以加载不同的js，把不需要的代码摒除，降低服务器和浏览器通信的开销。

 

输出——Output

定义输出文件，多入口文件时entry也能起到定义输出的作用。

const HtmlWebpackPlugin = require(‘html-webpack-plugin‘)
module.exports={
//入口文件
    entry:‘./src/index.js‘,//注意自己的路径
    made:‘development‘，//模式
    output：{
        filename:‘bundle.js‘
    }
}

需要每次输出文件名称不同时，可以在filename中使用hash值作为文件名。多入口文件时也可以使用。

        filename:‘[name]_[hash:5]_bundle.js‘//取5位的hash值

output中还可以定义输出文件的路径,引入path或者使用绝对路径

output：{
        filename:‘bundle.js‘，
        path:path.join(__dirname,‘output‘)
    }

 

loaders

loader用于对模块的源代码进行转换，可以在import或加载模块时预处理文件。loader可以将ts转换为js，也可以将内联图像转换为data URL。

module:{
    rules:[
        //定义转换规则，将后缀为.css的文件使用css-loader进行转换
        { test:/.css$/, use:‘css-loader‘}
    ]
}

module:{
    rules:[
        //loader的顺序，先使用的放后面
        { test:/.css$/, use:[‘style-loader‘,‘css-loader‘]}，
        { test:/.css$/, use:[‘style-loader‘,‘css-loader‘，‘less-loader‘ }
    ]
}

‘style-loader‘可以将我们的样式打包应用到页面，但是不会生成单独的css文件。这是就需要引入一个插件，‘extract-text-webpack-plugin’,引入后在webpack.config.js中引用。

const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin")
module.exports={
    entry:‘./src/index.js‘,//注意自己的路径
    made:‘development‘，//模式
    module:{
        rules:[
            //loader的顺序，先使用的放后面
            { test:/.css$/, 
                //抽取样式
                use:ExtractTextWebpackPlugin.extract({
                    //抽离方式
                    fallback:‘style-loader‘,//如果在use中的css-loader抽离失败，就执行fallback中的style-loader，成功即停止
                    use:‘css-loader‘
                })
            }，
            { test:/.css$/, 
                use:ExtractTextWebpackPlugin.extract({
                    fallback:‘style-loader‘,
                    use:[‘css-loader‘，‘less-loader‘]
                })
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:‘./src/index.html‘//声明css样式需要应用到的模板文件
        })
        new ExtractTextWebpackPlugin("style.css")//输出的文件名称
    ]
}

 

 

自己写一个简单的plugin插件

1. 首先创建一个ConsoleOnBuildWebpackPlugin.js插件文件。

   const pluginName = ‘ConsoleLogOnBuildWebpackPlugin‘;
   ?
   class ConsoleLogOnBuildWebpackPlugin {
       apply(compiler) {
           compiler.hooks.run.tap(pluginName, compilation => {
               console.log("webpack 构建过程开始！");
           });
       }
   }

    

2. 在webpack.config.js中引用ConsoleOnBuildWebpackPlugin.js插件文件。

3. 在plugins中new ConsoleOnBuildWebpackPlugin(),其他配置不变，即可调用。

 

手动配置热更新

首先在webpack.config.js文件中引入const webpack = require(‘webpack‘);

在module.exports中添加devServer

在plugins中添加（new webpack.HotModuleReplacementPlugin()）

devServer:{
    contentBase:‘./dist‘,
    hot:true,
}

在package.json中的scripts添加（"dev":"webpack-dev-server"）