webpack爬坑(七) - 使用webpack打包 html、css、js文件

• 安装模块

    npm init -y                                 // 初始化package.json文件
    npm i webpack webpack-cli -D                // 安装webpack以及webpack-cli
    npm i html-webpack-plugin -D                // 安装生成.html文件的插件
    npm i style-loader css-loader -D            // 安装处理css的loader
    npm i extract-text-webpack-plugin@next -D  // 安装把样式模块单独打包成.css文件的插件
    npm i babel-loader @babel/core -D           // 安装处理js的loader
    npm i babel-polyfill -D                     // 安装把es6新增方法转换成es6的loader

• 项目结构

    project                <!-- 项目名 -->
    │  package.json        <!-- 初始化的package.json文件 -->
    |
    │  webpack.config.js   <!-- 手动创建webpack的配置文件 -->
    |
    └─ src                  <!-- 创建src文件夹用来存放源代码 -->
    |   |
    |   |  app.js           <!-- 入口文件 -->
    |   |
    |   |  style.css          
    |   
    └─ template             <!-- 模板文件夹 -->
    |   | 
    |   |  index.html
    |  
    └─ node_modules         <!-- 存放安装的模块的文件夹 -->

• webpack.config.js 配置

    let htmlWebpackPlugin = require("html-webpack-plugin");
    let extractTextWebpackPlugin = require("extract-text-webpack-plugin");
    module.exports = {
        entry: {
            app: ["babel-polyfill","./src/app.js"]
        },
        output: {
            path: __dirname + "/dist",
            filename: "[name].[hash:8].js"
        },
        mode: "development",
        module: {
            rules: [
                {
                    test: /\.js$/,
                    use: {
                        loader: "babel-loader"               
                    }
                },
                {
                    test: /\.css$/,
                    use: extractTextWebpackPlugin.extract({     // 把css提取为单独的.css文件
                        fallback: {
                            loader: "style-loader",
                        },
                        use: [
                            {
                                loader: "css-loader",
                            }
                        ]
                    })
                }
            ]
        },
        plugins: [
            new htmlWebpackPlugin({
                filename: "index.html",                 // 生成的html文件名
                template: "./template/index.html",      // 模板路径
                minify:{
                        collapseWhitespace: true        // 是否压缩
                },
                inject: true                            // 是否自动引入js和css 默认为 true
            }),
            new extractTextWebpackPlugin({
                filename:"[name].css"
            })
        ]
    };