Webpack学习

背景

虽然在网上看了挺多webpack的教程，但还是对webpack这个工具一知半解，故想用自己的语言去理解webpack

一、webpack能做什么？

项目里的很多资源文件不能直接被浏览器识别，例如：ES6语法、sass/less预处理等，而Webpack可以把ES6的语法转为ES5语法、sass/less的语法转为css的语法，这样浏览器就可以识别出来了，相当于webpack给做了层转换。

代码压缩：缩小项目体积
热更新：代码发生变动后自动刷新浏览器页面，提升本地开发效率

...

二 、loader（模块加载器） 

对于webpack来说项目里的各种文件都称为资源，所以webpack在打包这些资源文件的时候需要用对应的loader来处理对应的文件类型，例如：
遇到.css后缀的资源文件需要用到css-loader 、style-loader
遇到.less后缀的资源文件需要用到less-loader 

...

需要注意的是当使用多个loader时webpack的处理顺序是从右往左，例如style-loader和css-loader的顺序

module: {
    rules: [
        {
            test: /\.css$/,
            // css-loader只负责加载css文件
            // style-loader负责将css样式添加到DOM中
            loader: ['style-loader','css-loader']
        },
        {
            test: /\.js$/,
            loader: 'babel-loader',
            include: [resolve('client'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
        },
        {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
        },
        {
            test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: utils.assetsPath('media/[name].[hash:7].[ext]')
            }
        },
        {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
            }
        }
    ]
}

三 、plugins （插件）

output: {
    path: path.resolve(__dirname,’./dist’), 
    filename:’./js/[name] - [chunkhash].js’//[name] 函数名 [chunkhash] 
    },
plugins: [
    new htmlWebpackPlugin({})
]

四 、webpack.config.js 默认webpack 配置文件 

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');//npm 安装

module.exports = {
    //entry:'./src/js/index.js', 单文件入口
    //entry:['./src/js/index.js','./src/js/hello.js'],//单文件合并入口
    entry: {//
        index: './src/js/index.js',
        hello: './src/js/hello.js',
        world: './src/js/world.js'
    },
    output: {
        path: path.resolve(__dirname, './dist'),//导出路径
        filename: 'js/[name].js',//[name] 函数名 [chunkhash]
        // publicPath:'http:www.music.com'//公共的path
    },
    module: { //loader
        rules: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, 'src'),//包含路径
                //exclude:/node_modules/, 或使用绝对路径
                exclude: path.resolve(__dirname, 'node_modules'),
                use: {
                    loader: 'babel-loader',
                    // options: {
                    // presets: ['env']
                    // }
                }
            },
            {
                test: /\.css$/,
                include: path.resolve(__dirname, 'src'),//包含路径
                //exclude:/node_modules/, 或使用绝对路径
                exclude: path.resolve(__dirname, 'node_modules'),
                // loaders:'style-loader!css-loader'
                // use:['style-loader','css-loader']
                use: [
                    { loader: 'style-loader' },
                    {
                        loader: 'css-loader',
                        options: { modules: true, importLoaders: 1 }
                        //importLoaders处理css中import的css
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: [
                                require('autoprefixer')({
                                    broswers: ['last 5 versions']
                                }),
                            ]
                        }
                    }
                ]
            },
            {
                test: /\.less$/,
                include: path.resolve(__dirname, 'src'),//包含路径
                //exclude:/node_modules/, 或使用绝对路径
                exclude: path.resolve(__dirname, 'node_modules'),
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                    { loader: 'less-loader' }
                ]
            },
        ]
    },
    plugins: [//插件
        new htmlWebpackPlugin({//会生成html文档位置与output有关
            template: 'index.html',//源模板文件
            filename: 'index.html',//生成html的文件名
            inject: true,//'head' 'body' false true定义嵌入js的位置
            title: 'this is good',//html的title标题
            minify: { //压缩html
                // collapseWhitespace:true,//删除空格
                // removeComments:true,//移除注释
                // minifyJS:true,//压缩js
            }
        })
    ]
}