webpack搭建简单项目

注意：本篇是基于webpack4.x版本的，有些低于4.x的相关依赖或插件，如：extract-text-webpack-plugin抽取样式插件，这里换成了mini-css-extract-plugin等

Git地址：https://zhangqh22.github.io/webpack_dev_server/

项目组织架构

├─ webpack_dev_server
│  ├─ build
│  ├─ ├─ static
│  ├─ └─ index.html
│  ├─ node_nodules
│  ├─ public
│  ├─ └─ index.html
│  ├─ src
│  ├─ ├─ assets
│  ├─ ├─ ├─ css
│  ├─ ├─ ├─ └─ index.css
│  ├─ ├─ ├─ images
│  ├─ ├─ ├─ └─ demo-img0.jpg
│  ├─ ├─ ├─ less
│  ├─ ├─ ├─ ├─ a.less
│  ├─ ├─ ├─ └─ b.less
│  ├─ ├─ ├─ video
│  ├─ ├─ └─ └─ movie.mp4
│  ├─ ├─ a.js
│  ├─ ├─ b.js
│  ├─ └─ index.js
│  ├─ package.json
└─ └─ webpack.config.js

安装已配置好的依赖，package.json，内容如下：

{
  "scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^2.0.2",
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.6.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  }
}

接下来配置webpack.config.js，相关的注释都有

const webpack = require('webpack')
const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin') // 清理目录
const HtmlWebpackPlugin = require('html-webpack-plugin') // 抽取html
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 抽取css

module.exports = {
    mode: 'development',
    entry:{
       index: './src/index.js' // 入口文件
    },
    output:{
       filename: 'static/js/[name].[hash:5].js', // hash:5表示hash串长度是5
       path: path.resolve(__dirname, './build') // 打包目录
    },
    module: {
        rules: [
            // css
            {
                test: /\.css$/,
                exclude: '/node_modules',
                use: [
                    {loader: MiniCssExtractPlugin.loader},
                    {loader: 'css-loader'}
                ]
            },
            // less
            {
                test: /a.less$/,
                exclude: '/node_modules',
                use: [
                    {loader: MiniCssExtractPlugin.loader},
                    {loader: 'css-loader'},
                    {loader: 'less-loader'}
                ]
            },
            {
                test: /b.less$/,
                exclude: '/node_modules',
                use: [
                    {loader: 'style-loader'}, // 项目运行的时候，动态追加到html中，用style标签把样式包起来
                    {loader: 'css-loader'},
                    {loader: 'less-loader'}
                ]
            },
            // 文件(mp4、mp3等)
            {
                test: /\.(mp4|mp3)$/,
                exclude: '/node_modules',
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[hash:5].[ext]',
                            outputPath: 'static/video'
                        }
                    }
                ]
            },
            // 图片
            {
                test: /\.(png|jpg|gif)$/,
                exclude: '/node_modules',
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name: '[name].[hash:5].[ext]',
                            outputPath: 'static/images',
                            publicPath: '../images' // 指定图片目录，解决图片路径不对的问题
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(), // 默认打包目录
        new MiniCssExtractPlugin({
            filename: 'static/css/[name].[hash:5].css',
        }),
        new HtmlWebpackPlugin({
            filename: 'index.html', // 默认在打包目录下新建html文件
            template: './public/index.html' // html模块
        }),
    ],
    devServer: {
        open: true, // 自动打开浏览器
        hot: true, // 热加载
        compress: true, // 资源文件通过压缩传输
        port: 3000,
        noInfo: true // 控制台不打印信息
    },
    stats: { 
        children: false // 用于解决Entrypoint undefined = index.html问题
    }
}

启动项目（需要webpack-cli）

webpack_dev_server> npm run dev

浏览器自动打开：http://localhost:3000/

打包

webpack_dev_server> npm run build