Webpack基础配置-一一网

这是我参与更文挑战的第2天，活动详情查看：更文挑战

Entry与Output的基础配置

entry 顾名思义就是打包的入口文件, Output就是打包的出口文件。

module.exports = {
    entry: {
        main: './src/index.js',
        list: './src/list.js'
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}
复制代码

上述代码块中的Entry配置的是多文件入口，其中main是指入口文件是src目录下的index.js;
上述代码块运行打包是会报错，原因是入口文件有两个但出口文件的filename是写死的会导致打包后的两个名字冲突,所以当我们的入口文件超过1个就应该按照下面的配置写;

 output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
}
复制代码

这样打包出来的文件就不会报错了,打包好后也好自动帮我们引入打包好的js,如下：

<html>
    <script src="./main.js"></script>
    <script src="./list.js"></script>
</html>
复制代码

打开其他网站可以看到所有引入的 JS 前面都会加一个 CDN 这样的一个地址，如果我们想在src="https://juejin.cn/post/main.js"上加cdn地址应该怎么做呢？

 output: {
    publicPath: 'http://xxx.com',
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
}
复制代码

在出口文件中配置publicPath即可，打包出来的文件就会变成src="http://xxx.com/main.js";

使用loader处理图片

当在html中引用图片在进行webpack打包时会报错，原因是webpack识别不了这张图片，这时就需要用到loader来帮助webpack识别图片；

module.exports = {
    module: {
        rules:[{
            test:/\.jpg$/,
            use: {
                loader: 'url-loader',
                options: {
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    limit: 10240
                }
            }
        }]
    }
}
复制代码

规则在module底下的rules中配置, 当webpack识别到jpg后缀时会执行上述代码使用loader进行转换，使用url-loader进行转换；
options是配置选项[]是占位符的标志，[name]表示识别图片的名字，[hash]表示产生随机字符串,ext表示识别图片的后缀；
当我们需要把图片资源打包到images目录下时可以配置outputPath；
limit是限制图片大小, 由于使用的是url-loader如果图片小于10240字节就会将图片以base64的形式打包到js当中，如果图片大于10240字节就会生成images文件夹并存在此目录下;

使用loader处理样式

import引进css文件时webpack也是无法识别的，此时我们需要继续在rules中添加规则:

{
    test:/\.css$/,
    use: [
        'style-loader',
        'css-loader',
        'postcss-loader'
    ]
}
复制代码

css-loader帮我们干了一件什么样的事情呢？
- css loader会帮我们分析出几个css文件之间的关系，最终把这些css文件合并成一段css；
style-loader它的作用是什么呢？
- 在得到css-loader生成的css内容之后,style-loader会把这段内容挂载到页面，打包后页面的head部分会自动引入一个style标签，这个标签就是style-loader帮我们挂载上去的;
- 所以在我们处理css文件的时候需要配合css-loader以及style-loader一起来使用;
postcss-loader是干嘛的呢？
- 在这里postcss-loader是为了给浏览器内核添加私有属性;
- 添加此loader后，会去找到postcss.config.js文件，配置如下:
- ```
  // 安装： npm install autoprefixer --save
  module.exports = {
    plugins: [
          require('autoprefixer')
    ]
  } 
复制代码
```
- autoprefixer效果是对css文件添加兼容性前缀。

如果是使用scss需要在添加规则：

{
    test: /\.scss$/,
    use: {
        'style-loader',
        {
            loader: 'css-loader',
            options: {
                importLoaders: 2
            }
        },
        'sass-loader',
        'postcss-loader'
    }
}
复制代码

importLoaders=2的意思是在css-loader之后指定两个数量的loader来处理import进来的资源，两个是指sass-loader以及postcss-loader;

使用HtmlWebpackPlugin生成模板

使用webpack打包时生成dist目录点进去以看里面只有js以及css文件并没有html文件需要我们自己手动引入，这种情况应该怎么处理？

// 安装 npm i html-webpack-plugin clean-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }), 
        new CleanWebpackPlugin(['dist']),
    ]
}
复制代码