webpack学习笔记

一、安装

npm install --save-dev webpack webpack-cli

 查看版本

npx webpack --version

二、文件编译命令

npx webpack ./src/index.js -o ./dist

三、loder

1.style-loader(处理css中的URL等)

npm install style-loader -D

2.css-loader（将CSS插入到页面的style标签）

npm install css-loader -D

3. 安装babel-loader,babel/core和preset

npm install -D babel-loader @babel/core @babel/preset-env

4.安装sass-loader

 npm install -D sass-loader

5.安装 postcss-loader 和 postcss

npm install --save-dev postcss-loader postcss

 安postcss-loader 和 autoprefixer

npm install --save-dev autoprefixer

四、webpack.config.js配置文件

const path = require('path');

moudle.exports = {
    // 入口文件的配置
    entry:{
        index:'./src/index.js',
        main:'./src/main.js'
    },
    // 出口文件的配置
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].js'
    },
    // 模块：例如解读CSS，图片如何转换，压缩
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    },
    // 
    plugins:{},
    // 
    devServer:{}
}

多入口文件时的entry配置

//传入对象 

entry:{

        app:'./src/app.js',

        adminApp:'./src/adminApp.js',

        about:'./src/about.js',

},

//传入数组

 entry: ["./src/app.js", "./src/adminApp.js", "./src/about.js"],

五、webpack构建命令

npx webpack

or

npm run build