webpack-01

2020-03-01

字数统计: 400字 | 阅读时长≈ 2分

看官网源码很重要！！！！

www.npmjs.com npm官网

www.webpackjs.com webpack官网

入口出口 loader 插件

npm i webpack webpack-cli -D

npm i –save-dev css-loader

npm i –save-dev webpack-dev-server

npm i style-loader -D

npm i -save-dev mini-css-extract-plugin 申请的CSS自动提取

package.json 修改scripts里

"dev": "webpack-dev-server --mode development --config scripts/webpack.config.js",

"build": "webpack --mode production --config scripts/webpack.config.js",

(dev保留代码)

默认入口是src下的index.js 这个很重要因为如果不是index的话就会listing directory

修改webpack.config.js里的

const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin") 

//创建一个插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin({
    template: 'public/admin.html',
    title: 'webpack',
    filename: 'index.html'
})

// const minicssPlugin = new MiniCssExtractPlugin({
//     filename: 'static/css/[name].[chunkHash:8].css',
// })两种形式

module.exports = {                                           
    entry: {
        index: './src/index.js'
    },
    output: {
        path: path.resolve(process.cwd(),"dist"),
        filename: 'static/js/[name].[hash:8].js'        //可以用chunkHash同一次操作每个文件都不一样
    },           
    plugins: [
        htmlPlugin,
        new MiniCssExtractPlugin({
            filename: 'static/css/[name].[hash:8].css',
        })
    ],
    module: {
        rules: [
            {
                test:/\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'                    //后写的先执行
                ],
                exclude: /node_modules/
            },
        ],
    },
    devServer: {
        publicPath: "/",
        progress: true,
        //contentBase: "./dist", //服务启动在哪一个文件夹下
        open: true, // 启动服务时，自动打开浏览器
        port: 3000, // 端口号
        hot: true, // devServer开启Hot Module Replacement的功能 与chunkhash冲突所以原先在此关闭
        hotOnly: false, // 即便HMP的功能没有生效，浏览器也不能自动刷新
        compress: true
    }
}

运行npm run build或者npm run dev

本文作者： Raphael_Li
本文链接： https://lifei-2019.github.io/webpack-01/
版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！