webpack3基础实例

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
//npm i webpack@3 --save-dev
//插件需要引入,loader不需要
//css-loader styleloader
//file-loader url-loader
//webpack-dev-server
//html-webpack-plugin clean-webpack-plugin
module.exports = {
    entry: './src/js/entry.js', //入口文件位置
    output: {                   //输出位置
        filename: "bundle.js",  //文件名
        // publicPath: "js/" 具有强制寻找文件性,一般不用
        path: path.resolve(__dirname, 'src/build/') //完整路径
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader', //加载好的css添加style放入头部
                    'css-loader', //加载整合css模块
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [{
                    loader: 'url-loader', //file-loader的上层语法糖,
                    options: {
                        limit: 8192   //过大(8kb)转换为base64字符串
                    }
                }
                ]
            }
        ]
    },
    devServer: {
        contentBase: 'src/build'//热加载
        //会在虚拟内存中生成bundle.js和原来没关系(注意index.html的引入script标签的方式)
        //webpack-dev-server默认服务于根目录的index.html,可自行配置contentBase
        //webpack-dev-server --open新窗口打开热加载
    },
    plugins: [
        new HtmlWebpackPlugin({template: './index.html'}), //根据模板生成新的页面,自动添加<script>
        new CleanWebpackPlugin(['src/build']) //先删除文件夹,再进行打包编译
    ]
}

 

转载于:https://www.cnblogs.com/liqunblog/p/9492328.html