webpack基础配置和使用

准备工作

1. 新建目录
2. 在当前目录下 npm init -y 初始化 package.json 文件

3. 创建对应的文件

   
   
   项目结构
4. 安装webpack 需要用到的依赖

   • First step(三大件):

     • webpack
     • webpack-cli
     • webpack-dev-server

   • Second step(六件套):

     • 处理 JS -> ES6 ES7 ES8 装饰器
       • babel-loader@7 (考虑到兼容 babel-core问题, 安装 7.x.x版本)
       • babel-core
       • babel-preset-env
       • babel-plugin-transform-runtime
       • babel-plugin-transform-decorators
       • babel-plugin-transform-decorators-legacy

   • Thrid step(四大件):

     • 处理 sass -> css -> style
       • sass-loader
       • node-sass
       • css-loader
       • style-loader
     • postcss-loader autoprefixer (自动给css加前缀, 需要配置)

   • Forth step:

     • 处理模板 ejs-loader
       • ejs tpl

   • Fifth step:

     • 处理 HTML 的插件
       • html-webpack-plugin (压缩HTML 或者给 HTML添加一些 js 文件)

   • Tips:

     • --save-dev (表示安装在开发环境下的) 简写 -D
     • --save (安装在生产环境下的)简写 -S
5. 安装完成后可在 package.json 中看到对应的插件版本
   
   image.png
6. 创建 webpack.config.js 文件进行配置

// 注: 一般所有的 loader , 都不需要进行导入, 一般 plugin 结尾的插件都需要导入

// 压缩HTML 或者给 HTML添加一些 js 文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 解决绝对路径问题
const path = require('path');

module.exports = {
    // 设置开发模式 development production
    mode: 'development',
    
    // 设置入口文件(可以是单个也可以多个(对象形式) )
    entry: {
        index: path.resolve(__dirname, './views/assets/js/index.js')
    }, 
    
    // 设置输出文件
    output: {
        // 设置打包后生成的目录
        path: path.resolve(__dirname + '/dist'),
        
        // 设置打包后生成的文件名, 设置 [name] 打包与原文件同名 
        filename: 'js/[name].js'
    },
    
    // 设置规则
    module: {
        rules: [
            {
                // 匹配一个后缀名为 js(xx) 结尾的文件
                test: /\.js$/,
                
                // 要是用什么样的loader
                loader: 'babel-loader',
                
                // 排除node_modules对应loader目录下的js
                exclude: path.resolve(__dirname, 'node_modules'),
            },
            {
                test: /\.css$/,
                
                /*  使用多个 loader 需要用 use , 写成数组结构
                    注: loader 是从下往上执行的, 先执行 css-loader, 再执行 style-loader
                */
                use: [ 
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.scss$/,
                use: [ // 从下往上执行
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.tpl$/,
                loader: 'ejs-loader'
            }
        ]
    },
    /* 是一个数组, 装的是实例化对象
       每一个插件实际都是一个构造函数, 要使用就需要 new
    */
    plugins: [
        // 压缩HTML 或者给 HTML添加一些 js 文件
        new HtmlWebpackPlugin({
            filename: 'index.html', // 设置打包后的filename
            
            template: path.resolve(__dirname, './views/home/index.html'), // 要打包的目标html文件
            
            /* 设置入口文件, 可以设置多个, 设置的是 js 文件, 对应上面的 entry: {} 中的js文件, eg: 当前设置的index, 就是entry: {}中的inde
                Tip: 设置时需要注意js文件在页面的执行顺序, 先执行的在前面
            */
            chunks: ['index'],

            excludeChunks: ['node_modules'], // 需要排除的文件
        })
    ], 
    
    // 配置 webpack-dev-server
    devServer: {
        open: true, // 当启动 devServer 的时候, 自动打开浏览器
        host: 'localhost',
        port: 3300 // 端口
    }
}

7. 配置完成后, 在 packeg.json 中设置 执行命令

   • 运行命令
     • "dev": "webpack-dev-server --config webpack.config.js"
       • --config webpack.config.js 表示使用到的配置文件是 webpack.config.js
   • 打包命令
     • "webpack": "webpack --config webpack.config.js"
       `
       
       image.png

8. 最后的项目结构

   
   
   image.png