webpack 开发环境配置

安装环境

• 安装node.js
• 安装webpack

npm install webpack -g

• 安装webpack-cli

npm install webpack -g

开发环境搭建

一、初始化

//初始化 创建package.json文件
npm init -y

二、创建webpack.config.js 配置文件

三、webpack 核心模块

• entry 打包入口

//绝对路径
module.exports = {
    entry: './scr/index.js'
}

• output 输出配置

//node模块
const { resolve } = require('path');
module.exports = {
    entry：'./src/index.js'
    output: {
        //输出路径
        path: resolve(__dirname, 'dist'),
        // 输出文件名称
        filename: 'bundle.js'
    },
    module: {
        rules: [],
        plugins: [],
        mode: 'development'
    }
}

• loader 对资源进行处理

module: {
    rules:[
        //处理css资源
        //安装资源：npm install style-loader css-loader -D
        //use 中loader执行顺序 从右到左，从下到上
        {
            //style-loader 创建style标签，将js中的样式资源插入进行，添加到head中生效
            //css-loader 将css文件变成commonjs模块加载js中，里面内容是样式字符串
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },
        //处理less资源
        //安装资源：npm install less less-loader -D
        {
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']
        },
        //处理图片资源
        // 安装资源：npm install url-loader -D
        {
            test: /\.(jpg|png|gif)$/,
            loader: 'url-loader',
            options： {
                //大小10KB一下的图片会打包成base64
                limit: 10 * 1024,
                // [hash:8]取图片的hash的前8位,[ext]取文件原来扩展名
                name: '[hash: 8].[etx]',
                //关闭url-loader的es6模块化，使用commonjs解析
                esMoudle: false,
                // 文件输出路径文件名
                outputPath: 'images'
            }
        },
        //处理html中的图片资源
        //安装资源：npm install html-loader -D
        {
            test: /\.html$/,
            loader: 'html-loader'
        },
        //处理其他资源
        //安装资源：npm install file-loader -D
        {
            exclude: /\.(html|js|css|less|jpg|png|gif)$/,
            loader: 'file-loader',
            name: '[hash: 8].[ext]',
            outputPath: 'files'
        }
    ],
    plugins:[
    
    ]
}

• plugin 配置插件

const HtmlWebpackPlugin = require('html-webpack-plugin');
module: {
    rules: [],
    plugins: [
        //处理html原文件自动生成并且引入打包后的js文件
        //安装资源：npm install html-webpack-plugin -D
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}

• mode 配置开发模式或者生产模式

module: {
    rules: [],
    pluagins: [],
    //开发development,生产production
    mode: 'development'
}

• devServer

// 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）`
// 启动devServer指令为：npx webpack-dev-server`
module: {
    devServer: {
        contentBase: resolve(__dirname, 'dist'),
        compress: ture,
        port: 3001,
        open: true
    }
}