webpack学习笔记（一）

描述

现功能：基于webpack4.x版本，主要为可以对html、css、js（暂只支持es5）打包处理，css和图片资源引入等暂不能在html里直接引入
下期主要优化：文件的压缩，html引入图片和css，js新增babel处理（兼容es6+），新增typescript、新增sass和less的支持

项目地址

https://gitee.com/ziyuan_xcc/learn-webpack

环境安装

npm install;
npm run build;

webpack.config.js

路径./webpack.config.js

const path = require('path')
const Webpack = require('Webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
    // 入口(entry)
    entry: {
        vendor: './src/vendor.js',
        main: './src/index.js'
    },
    // 输出(output)
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[chunkhash].js'
    },
    // 使用 source map
    devtool: 'inline-source-map',
    // loader
    module: {
        rules: [
            // 识别js
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            // 加载 CSS
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            // 加载图片
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            // 加载字体
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            },
            //把jquery变成 $ 暴露到window
            {
                test: require.resolve('jquery'),
                use: 'expose-loader?$'
            },
            //把lodash变成 _ 暴露到window
            {
                test: require.resolve('lodash'),
                use: 'expose-loader?_'
            }
        ]
    },
    // 插件(plugins)
    plugins: [
        // 打包前清理
        new CleanWebpackPlugin(),
        // html处理
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        // css处理
        new ExtractTextPlugin({
            filename: "styles.css",
            allChunks: true,
        }),
        // 生成一个额外的 chunk 包含入口chunk 的公共模块
        new Webpack.optimize.SplitChunksPlugin({
            name: "vendor",
            minChunks: 3,
        })
    ]
}