Webpack基础配置

webpack的配置文件是 webpack.config.js

入口entry

• 默认路径是./src/index.js

module.exports = {
    entry: './src/main.js',
}

出口output

• 默认路径是./dist/main.js

module.exports = {
    entry: './src/main.js',
    output: {
      path: './output',
      filename: 'output-test.js',
    },
}

模式mode

• 值为development或者production

module.exports = {
    entry: './src/main.js',
    output: {
      path: './output',
      filename: 'output-test.js',
    },
    mode: 'production',
}

loader

• loader 用于对模块的源代码进行转换，将其他语言转换成JavaScript
• loader 可以使你在 import 或"加载"模块时预处理文件
• 如转换jsx的babel-loader，加载.css文件的css-loader ...

module.exports = {
    entry: './src/main.js',
    output: {
      path: './output',
      filename: 'output-test.js',
    },
    mode: 'production',
    module: {
        rules: [
            { test: /\.js|jsx$/, use: 'babel-loader', exclude: path.join(__dirname, './node_modules') },
        ],
    },
}

插件plugins

• 插件是webpack的支柱功能，在于解决loader无法实现的其他事

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

const htmlPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname, './src/index.html'),
    filename: 'index.html',
})

module.exports = {
    entry: './src/main.js',
    output: {
      path: './output',
      filename: 'output-test.js',
    },
    mode: 'production',
    module: {
        rules: [
            { test: /\.js|jsx$/, use: 'babel-loader', exclude: path.join(__dirname, './node_modules') },
        ],
    },
    plugins: [
        htmlPlugin,
    ],
}