webpack精简总结

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用

与gulp和grunt区别

Gulp/Grunt是一种能够优化前端的开发流程的工具， 而WebPack是一种模块化的解决方案， Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具

不使用配置文件

1. 全局安装 webpack entryfilename outputfilename
2. 局部安装 node_modules/.bin/webpack entryfilename outputfilename

配置文件webpack.config.js

执行步骤

1. mkdir webpack-demo
2. npm init -y
3. npm install -D webpack webpack-cli
4. touch .gitignore webpack.config.js

// .gitignore
node_modules/
dist/
# editor
.vscode
.idea
.project
复制代码

const path = require('path')
module.exports={
    entry:'./main.js',
    output:path.resolve(__dirname,'./dist'),
    module:{
        rules:[
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test:/\.(jpg|png|svg)$/,
                use:['file-loader']
            }
        ]
    },
    plugins:[

    ]
}
复制代码

执行命令

• npx webpack
• "dev":"webpack --config webpack.config.js"

配置开发dev和生产pro环境

dev

1. npm install webpack-merge webpack-dev-server html-webpack-plugin

const common = require('./webpack.config.js');
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
modules.export = merge(common,{
    devtool:'inline-source-map',
    plugins:[
        new HtmlWebpackPlugin({
            filename:'index.html',
            template:'./app/index.html'
        })
    ],
    devServer:{
        hot:true,
        port:3000
    }
})
复制代码

production

• npm install clean-webpack-plugin copy-webpack-plugin

const common = require('./webpack.config.js');
const merge = require('webpack-merge');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports=merge(common,{
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template:'./app/index.html',
            inject:true,
            minify:{
                removeComments:true,
                minifyCSS:true,
                collapseWhitespace:true
            }
        }),
        new CopyWebpackPlugin([
            {
                from:'./static',
                to:'static'
            }
        ])
    ]
})
复制代码