webpack的配置文件

1.最基本的配置

当你使用

npx webpack index.js

进行打包的时候，是要指定打包的入口文件，否则是会报错的,

但是你可以在项目中配置一个 webpack.config.js 文件，webpack默认的配置文件

在项目的主目录下增加一个 webpack.config.js 文件

const path = require('path')

module.exports = {
	// 已压缩
    // mode: 'production',
    // 无压缩
    mode: 'development',
	// 打包的入口文件(src 里面一般存放着源代码)
     entry: {
        main: './src/index.js'
    },
    // 打包之后的出口
    output: {
    	// 打包之后的文件名字
        filename: 'bundle.js',
        // 存储路径 （绝对路径） 当前路径下的 bundle
        path: path.resolve(__dirname, 'dist')
    }
}

此时运行 npx webpack 就不会报错了

如果你依然想要将 index.js 作为 webpack 的默认配置文件，那么你可以在终端中运行

npx webpack --config index.js

当我们做项目的时候，一般不会使用 npx 来运行，所以我们可以在 package.json文件里面来配置命令

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  // 当我们在终端中执行 npm run bundle 的时候，也是可以正常打包的 
    "bundle": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "webpack": "^4.42.0"
  }
}

这样一个最基本的配置就完成了

但是这样的配置只能打包 js 文件，如果想要打包其他类型的文件，还需要配置其他的信息

2.图片打包

比如打包图片文件,则需要在 webpack.config.js 里面配置新的参数

const path = require('path')

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'
    },
    // 配置 module 模块
    module: {
    	// 定义规则
        rules: [
            {
            	// 打包的文件以 jpg 结尾的
                test: /\.jpg$/,
                // 使用 file-loadre 进行打包
                use: {
                    loader: 'file-loader'
                }
            }
        ]
    },
    output: {
        filename: 'bundle.js',
        // 绝对路径
        path: path.resolve(__dirname, 'dist')
    }
}

终端中运行

 npm install file-loader -D

此时打包之后的图片的名称是哈希值的，要想打包之后的图片名称与原来的保持一致，

module: {
        rules: [
            {
                test: /\.jpg$/,
                use: {
                    loader: 'file-loader',
                    //
                    options: {
                        // placeholder 占位符 hash 打包的哈希值
                        // 打包之后输出的名字是原来的名字，加上哈希值，加上原来的后缀
                        name: '[name]_[hash].[ext]',
                        // 打包之后输出的路径
                        outputPath: 'images/'
                    }
                    // 
                }
            },
            {
                test: /\.vue$/,
                use: {
                    loader: 'vue-loader'
                }
            }
        ]
    },

有的时候图片很小，那么就可以把图片放在 js 里面，减少请求，此时就可以使用 url -loader 来进行打包

 npm install url-loader -D

module: {
        rules: [
            {
                test: /\.(jpg|png|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        // placeholder 占位符 hash 打包的哈希值
                        name: '[name]_[hash].[ext]',
                        outputPath: 'images/',
                        // 限制大小，当图片小于这个数值就会被打包在 js 文件里面 以 base64 的形式存在，当大于这个数值，就会以 jpg 的形式存在
                        limit: 20480
                    }
                }
            },
            {
                test: /\.vue$/,
                use: {
                    loader: 'vue-loader'
                }
            }
        ]
    },

3.css文件打包

css文件打包，需要安装

npm install style-loader css-loader -D

module: {
        rules: [
            {
                test: /\.(jpg|png|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        // placeholder 占位符 hash 打包的哈希值
                        name: '[name]_[hash].[ext]',
                        outputPath: 'images/',
                        limit: 10480
                    }
                }
            },
            // css
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            // css
            {
                test: /\.vue$/,
                use: {
                    loader: 'vue-loader'
                }
            }
        ]
    },

css-loader 在打包过程中会将项目里的所有css文件合并成为一个文件

style-loader 会把 css-loader 得到之后的挂载到 header 里面

如果要使用 scss，则要安装相应的loader

module: {
        rules: [
            {
                test: /\.(jpg|png|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        // placeholder 占位符 hash 打包的哈希值
                        name: '[name]_[hash].[ext]',
                        outputPath: 'images/',
                        limit: 10480
                    }
                }
            },
            {
                test: /\.scss$/,
                use: [
                'style-loader',
                'css-loader',
                'sass-loader'
              ]
            },
            {
                test: /\.vue$/,
                use: {
                    loader: 'vue-loader'
                }
            }
        ]
    },

loader 的执行顺序是从下到上，从右到左

有的时候css样式里面会使用一些css3的新特性，此时要加上前缀，使用 postcss-loader

npm i -D postcss-loader

npm install autoprefixer -D

根目录底下新建一个 postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

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

4.css模块化

为了不让样式之间产生影响，可以在webpack.config.js里面设置参数

{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2,
                            modules: true
                        }
                    },
                    'sass-loader',
                    'postcss-loader'
                ]
            },

5.打包字体文件

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