webpack4相关的配置与指令

1、打包指令：

webpack --config=config/webpack.dev.js

注意：指令中右边部分：config/webpack.dev.js，是webpack的配置文件，不一定是这样写，需要根据配置文件的路径以及文件名称来写。

2、开启本地服务

webpack-dev-server --config=config/webpack.dev.js

注意：指令中右边部分：config/webpack.dev.js，是webpack的配置文件，不一定是这样写，需要根据配置文件的路径以及文件名称来写。

3、在webpack.json文件中配置 打包 和 开启本地服务 的快捷键：

  "scripts": {
    "start": "webpack-dev-server --config=config/webpack.dev.js",
    "build": "webpack --config=config/webpack.dev.js"
  },

就是配置一个对象，key就是快捷键，value就是原来的指令

使用方法：

开启本地服务：npm start

打包：npm run-srcipt build

 

4、webpack加载css文件

因为webpack只认识js文件，所以，如果要加载其它文件的话，是需要借助一些加载器的，例如现在加载css文件的话，我们就需要安装2个模块：style-loader 和 css-loader，安装好之后，在webpack的配置文件中配置好，如下：

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

同时还需要在入口的js文件里引入css文件，假设入口文件是index.js，那么就要在index.js里使用相对路径引入css文件，如：

index.js

require("./../css/index.css");

 

5、webpack报错提示

如果webpack编译发生错误，在终端上面是会有提示的，但不会像vue那样在页面也提示错误。如果要在页面提示错误，稍微配置下就可以了，如下：

    devServer: {
        contentBase: "dist", 
        overlay: true       // 如果有报错会在页面上提示
    },

 

6、HTML文件配置热更新

如果希望在HTML里修改了内容或者是增加了代码，会马上进行更新的话，配置如下：

plugins: [
    
    new HtmlWebpackPlugin({
        favicon: './src/image/ico/yuangukeji.ico',  // 配置favicon网页图标
        template: './src/index.html'    // 配置HTML热更新 步骤1
    }),

    new webpack.HotModuleReplacementPlugin()    // 配置HTML热更新 步骤2
]

7、webpack加载HTML

需要安装的模块有：html-loader、extract-loader、file-loader

cnpm install html-loader extract-loader file-loader --save

然后也是需要在module的rules中进行配置，如下：

{
    test: /\.html$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                name: "[name].html"
            }
        },
        {
            loader: "extract-loader"
        },
        {
            loader: "html-loader",
        }
    ]
},

然后在入口文件中进行引入，如下：

index.js

require("./../index.html")

8、webpack加载图片

加载图片的话，需要用到file-loader，安装方法如上面说的一样，这里不重复。在rules中的配置如下：

{
    test: /\.(jpg|png|gif)$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                name: 'image/[name].[ext]'
                // name: 'image/[name]-[hash:8].[ext]'
            }
        }
    ]
}

示例中，有一行代码注释了的，那是加了8位哈希值的写法。