码迷,mamicode.com
首页 > Web开发 > 详细

webpack 配置

时间:2018-02-02 00:54:03      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:out   html   pat   template   require   目录   UI   json   启动命令   

三、配置发布阶段的脚本和配置文件

1、根目录下新建文件:

webpack.pub.config.js

2、在 package.json 中配置启动命令

"pub": "webpack --config webpack.pub.config.js"

3、配置方案

const path = require(‘path‘);
// 在内存中生成一份 HTML 代码,
const htmlWebpackPlugin = require(‘html-webpack-plugin‘);

module.exports = {
    // 入门文件
    entry: path.join(__dirname, ‘./src/main.js‘),
    // 打包后文件的存放目录
    output: {
        path: path.join(__dirname, ‘./dist‘),
        filename: ‘bundle.js‘
    },
    // 插件
    plugins: [
        new htmlWebpackPlugin({
            template: path.join(__dirname, ‘./src/index.html‘),
            filename: ‘index.html‘
        })
    ],
    module: {
        rules: [
            { test: /\.css$/, use: [‘style-loader‘, ‘css-loader‘] },
            { test: /\.scss$/, use: [‘style-loader‘, ‘css-loader‘, ‘sass-loader‘] },
            // limit 大于 5000,的图片,保留8位哈希,以本本来的名字和后缀结尾
            { test: /\.(png|gif|bmp|jpg)$/, use: ‘url-loader?limit=5000&name=[hash:8]-[name].[ext]‘},
            { test: /\.js$/, use: ‘babel-loader‘, exclude: /node_modules/ }
        ]
    }
}

 

webpack 配置

标签:out   html   pat   template   require   目录   UI   json   启动命令   

原文地址:https://www.cnblogs.com/guashi/p/8401714.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!