準(zhǔn)備工作

1. 新建目錄
2. 在當(dāng)前目錄下 npm init -y 初始化 package.json 文件

3. 創(chuàng)建對應(yīng)的文件

   
   
   項目結(jié)構(gòu)
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 (表示安裝在開發(fā)環(huán)境下的) 簡寫 -D
     • --save (安裝在生產(chǎn)環(huán)境下的)簡寫 -S
5. 安裝完成后可在 package.json 中看到對應(yīng)的插件版本
   
   image.png
6. 創(chuàng)建 webpack.config.js 文件進(jìn)行配置

// 注: 一般所有的 loader , 都不需要進(jìn)行導(dǎo)入, 一般 plugin 結(jié)尾的插件都需要導(dǎo)入

// 壓縮HTML 或者給 HTML添加一些 js 文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 解決絕對路徑問題
const path = require('path');

module.exports = {
    // 設(shè)置開發(fā)模式 development production
    mode: 'development',
    
    // 設(shè)置入口文件(可以是單個也可以多個(對象形式) )
    entry: {
        index: path.resolve(__dirname, './views/assets/js/index.js')
    }, 
    
    // 設(shè)置輸出文件
    output: {
        // 設(shè)置打包后生成的目錄
        path: path.resolve(__dirname + '/dist'),
        
        // 設(shè)置打包后生成的文件名, 設(shè)置 [name] 打包與原文件同名 
        filename: 'js/[name].js'
    },
    
    // 設(shè)置規(guī)則
    module: {
        rules: [
            {
                // 匹配一個后綴名為 js(xx) 結(jié)尾的文件
                test: /\.js$/,
                
                // 要是用什么樣的loader
                loader: 'babel-loader',
                
                // 排除node_modules對應(yīng)loader目錄下的js
                exclude: path.resolve(__dirname, 'node_modules'),
            },
            {
                test: /\.css$/,
                
                /*  使用多個 loader 需要用 use , 寫成數(shù)組結(jié)構(gòu)
                    注: loader 是從下往上執(zhí)行的, 先執(zhí)行 css-loader, 再執(zhí)行 style-loader
                */
                use: [ 
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.scss$/,
                use: [ // 從下往上執(zhí)行
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.tpl$/,
                loader: 'ejs-loader'
            }
        ]
    },
    /* 是一個數(shù)組, 裝的是實例化對象
       每一個插件實際都是一個構(gòu)造函數(shù), 要使用就需要 new
    */
    plugins: [
        // 壓縮HTML 或者給 HTML添加一些 js 文件
        new HtmlWebpackPlugin({
            filename: 'index.html', // 設(shè)置打包后的filename
            
            template: path.resolve(__dirname, './views/home/index.html'), // 要打包的目標(biāo)html文件
            
            /* 設(shè)置入口文件, 可以設(shè)置多個, 設(shè)置的是 js 文件, 對應(yīng)上面的 entry: {} 中的js文件, eg: 當(dāng)前設(shè)置的index, 就是entry: {}中的inde
                Tip: 設(shè)置時需要注意js文件在頁面的執(zhí)行順序, 先執(zhí)行的在前面
            */
            chunks: ['index'],

            excludeChunks: ['node_modules'], // 需要排除的文件
        })
    ], 
    
    // 配置 webpack-dev-server
    devServer: {
        open: true, // 當(dāng)啟動 devServer 的時候, 自動打開瀏覽器
        host: 'localhost',
        port: 3300 // 端口
    }
}

7. 配置完成后, 在 packeg.json 中設(shè)置 執(zhí)行命令

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

8. 最后的項目結(jié)構(gòu)

   
   
   image.png