webpack基础配置

webpack基础配置

关键字记录

module
exports 
require
entry
main
mode
development
production
output
filename
path
publicPath
devServer
contentBase
overlay
rules
use
loader

配置步骤:
1.创建一个目录，在cmd命令提示符中，在该目录中初始化配置,执行完后会生成一个package.json文件:

npm init -y

2.本地局部安装webpack webpack-cli webpack-dev-serve
–save-dev本地安装

npm install webpack webpack-cli webpack-dev-server --save-dev

3.配置文件（webpack.dev.js）

const path = require("path")
module.exports ={
    //入口：可以有多个
    entry:{
        main:["./src/main.js"]
    },
    //打包环境  development：开发   production：生产
    mode:"development",
    //出口：有且只有一个
    output:{
        //打包编译后的文件名
        filename:"[name]-bundle.js",
        //打包编译后文件的所在目录
        path: path.join(__dirname,"../dist"),
        //资源文件目录
        publicPath:"/"
    },
    //本地服务配置
    devServer:{
        //默认是在dist下
        contentBase:"dist"
    }
}

4.运行webpack-dev-server

webpack-dev-server --config=config/webpack.dev.js

5.文件打包

webpack --mode development  //开发环境
webpack --mode production //生产环境

配置css

1.安装style-loader和css-loader

npm install style-loader css-loader

2.配置css

//本地服务配置
    devServer:{
        //默认是在dist下
        contentBase:"dist",
        //报错显示
        overlay:true
    },
module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    {
                        loader:"style-loader"
                    },
                    {
                        loader:"css-loader"
                    }
                ]
            }
        ]
    }

配置htnl

1.安装加载器

npm install html-loader extract-loader file-loader

2.配置html

//html配置
            {
                test:/\.html$/,
                use:[
                    //给打包后的文件起名
                    {
                        loader:"file-loader",
                        options:{
                            name:"[name].html"
                        }
                    },
                    //和js文件分离
                    {
                        loader:"extract-loader"
                    },
                    //加载html文件
                    {
                        loader:"html-loader"
                    }
                ]
            }

配置图片

1.安装加载器
需要安装file-loader加载器

npm install file-loader

2.配置图片

{
                test:/\.(jpg|png|gif)$/,
                use:[
                    {
                        loader:"file-loader",
                        //"images/[name]-[hash:8].[ext]" 添加8位的hash值
                        options:{
                            name:"images/[name]-[hash:8].[ext]"
                        }
                    }
                ]
            }

es语法转换(babel)

1.安装加载器

//转换工具
npm install babel-cli
//加载器
npm install babel-loader@7
//编译插件
npm install babel-preset-env
//解决promise对打包的环境污染
npm install babel-plugin-transform-runtime

2.配置文件
创建一个.babelrc文件，在这个文件中配置插件

{
    "presets": [
        [
            "env",
            {
                "targets":{
                    //支持的浏览器和版本
                    "browsers":["last 2 versions"]
                },
                "debug":true
            }
        ]
    ],
    "plugins": [
        //解决promise对打包的环境污染
        "transform-runtime"
    ]
}

//js
            {
                test:/\.js$/,
                use:[
                    {
                        loader:"babel-loader"
                    }
                ],
                exclude:/node_modules/
            },

把散落在各地的css集成一个css文件

1.安装mini-css-extract-plugin

npm install mini-css-extract-plugin

2.配置

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
let path = require("path");
module.exports = {
    entry: {
        main: ["./src/main.js"]
    },
    mode: "development",
    output: {
        filename: "[name]-bundle.js",
        path: path.resolve(__dirname, "../dist"),
        publicPath: "/"
    },
    devServer: {
        contentBase: "dist"
    },
    module: {
        rules: [
            //html配置
            {
                test: /\.html$/,
                use: [
                    //给打包后的文件起名
                    {
                        loader: "file-loader",
                        options: {
                            name: "[name].html"
                        }
                    },
                    //和js文件分离
                    {
                        loader: "extract-loader"
                    },
                    //加载html文件
                    {
                        loader: "html-loader"
                    }
                ]
            },
            //css
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            esModule: true,
                        }
                    },

                    {
                        loader: 'css-loader'
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename:"[name]-bundle.css"
        })
    ]
}

压缩css文件

1.安装插件

optimize-css-assets-webpack-plugin

2.配置

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 
 optimization: {
        minimizer: [new OptimizeCssAssetsPlugin({})],
    },
 plugins: [       
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorPluginOptions: {
              preset: ['default', { discardComments: { removeAll: true } }],
            },
            canPrint: true
          })

引入vue文件，运行报错

1.引入

import Vue from 'vue'

2.webpack.comfig.js配置

resolve:{
        alias:{
            'vue$':'vue/dist/vue.js'
        }
    },

vue单页面

1.安装

npm install vue-loader vue-template-compiler --save-dev

2.配置

const VueLoaderPlugin = require('vue-loader/lib/plugin');
module: {
        rules: [
        //vue 解析
        {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
		]
}
            
  resolve:{
        alias:{
            'vue$':'vue/dist/vue.js'
        }
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name]-bundle.css"
        }),
        new VueLoaderPlugin()
    ]

3.使用