配置打包文件webpack.config.js

webpack中文网

https://www.webpackjs.com/concepts/

 配置打包文件

建文件webpack.config.js

打包一个文件

//路径模块
const path = require("path")
module.exports = {
    // 入口--打包从那个文件开始
    entry: "./src/main.js",
    // 出口--打包之后的文件名字
    output: {
        // path.resolve("a","b")   a/b
        path: path.resolve(__dirname, 'dist'),  //配置路径，在当前文件生成一个dist
        filename: 'main.js'  //指定一个输出的文件
    },
 }

使用命令打包

webpack

打包后输出一个文件main.js

打包多个文件

const path = require("path")
module.exports = {
    // 入口--打包从那个文件开始
    // entry: ["./src/main.js", "./src/main2.js"],  数组：打包会生成一个文件
    entry: { //打包会根据对象的属性，来命名输出的文件，注意在出口处设置[name]
        one: "./src/main.js",
        two: "./src/main2.js"
    },
    // 出口--打包之后的文件名字
    output: {
        // path.resolve("a","b")   a/b
        path: path.resolve(__dirname, 'dist3'),  //配置路径
        filename: '[name].main.js'  //指定一个输出的文件
    }
}

打包后输出两个打包文件onemain.js和twomain.js

添加模式mode

开发development，生产production项目上线的模式

module.exports = {
	mode:"development"
}

下载相应的loader

打包css、图片、less、scss、需、要加载相应的loader（加载器）

打包css

cnpm install css-loader style-loader -D

支持less

cnpm install less@3 less-loader@5 -D

支持scss

cnpm install sass sass-loader -D

图片是一个文件，下载一个文件打包

cnpm install file-loader -D

在webpack.config.js中配置

//路径模块
const path = require("path")
// 插件、自动生成html，设置titile
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
module.exports = {
    // 入口--打包从那个文件开始
    entry: "./src/main.js",
    // 出口--打包之后的文件名字
    output: {
        // path.resolve("a","b")   a/b
        path: path.resolve(__dirname, 'dist'),  //配置路径
        filename: 'main.js'  //指定一个输出的文件
    },
    // 配置css、less、scss、img打包规则
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }, {
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']
        }, {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        }, {
            test: /\.(png|jpg|gif)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {}
                }
            ]
        }]
    },
    // 插件
    plugins: [
        new HtmlWebpackPlugin({
            title: "好谷学堂",
            template: './src/index.html'
        })
    ],
    // 打包模式
    mode: "development",
  

}