webpack不会？ 先敲十遍基础配置。。。

前言： webpack学了一遍又一遍，无数的配置项，总是学了忘，忘了再忘，最后只能长叹webpack太难了！！！ 但是，你学与不学，webpack一直在那里。在你前端的道路上，只能一步步搞定它。 于是乎，只有最笨的方法，就是书读百遍，webpack敲个十来遍，也许就会了呢！

webpack

webpack 是一个模块打包工具。

核心概念：

entry：指定项目的入口文件

output：指定打包后的文件

loader：处理项目中不同类型的文件

plugin：在打包的不同阶段处理不同的任务

mode：配置不同的打包环境

文档地址： webpack.docschina.org/concepts/

起步

初始化

//初始化项目
npm init -y
// 按照webpack及webpack-cli
npm webpack webpack-cli -D

创建webpack配置文件

在项目根目录下创建 webpack.config.js 文件

loader

图片处理

file-loader：

url-loader：可以实现file-loader一切功能。limit：小于限制打包成base64，大于会使用file-loader打包

npm install file-loader url-loader --save-dev

rules: [{
    test: /\.(jpg|png|gif)$/,
    use: [{
        loader: 'url-loader',
        options: {
            outputPath: 'img/',
            name: '[name].[hash].[ext]',
            limit: 102400
        }
    }]
}]

样式处理

css文件：style-loader ，css-loader

scss文件： node-sass， sass-loader

less文件：less， less-loader

添加前缀： postcss-loader，autoprefixer

// webpack.config.js
module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
                'postcss-loader'
            ] 
        },
        {
            test: /\.scss$/,
            use: [
                'style-loader',
                'css-loader',
                'sass-loader',
                'postcss-loader'
            ] //loader从后往前依次执行
        }
    ]
}

// 在根目录下新建postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

字体处理

module： {
    rules: [
    	{
    		test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i, 
    		use: {
    			loader: 'file-loader'
    		}
    	}
    ]
}

HTML模板

npm i html-webpack-plugin -D

创建HTML文件：使用 html-webpack-plugin将生成的 js 自动引入到html模板文件中

const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
     new HtmlWebpackPlugin({
        template: path.resolve(__dirname, 'public/index.html')
    })
]

清除打包目录

使用clean-webpack-plugin在打包前清除打包目录文件

const {CleanWebpackPlugin} = require('clean-webpack-plugin')

plugins: [
    new CleanWebpackPlugin(),
]

source map

代码映射

development devtool： 'cheap-module-eval-source-map'

production devtool：’cheap-module-source-map'

WebpackDevServer

开发时开启本地服务器

npm i webpack-dev-server -D

devServer:{
    port: 3000, // 运行端口
    open: true, // 是否自动运行在浏览器中
    hot: true,  // 是否开启HRM
},

HMR （Hot Module Replacement）

在应用程序运行过程中，替换、添加或删除 模块，而无需重新加载整个页面

const Webpack = require('webpack')
devServer: {
	hot: true
},
plugins: [ new Webpack.HotModuleReplacementPlugin()]

Babel 处理ES6 语法s

babel-loader、 @babel/core ： babel 基础插件

@babel/preset-env ： 转化ES6基础语法 （如： let、const 、箭头函数等）

@babel/polyfill ： 兼容 ES6 新语法（如： promise 等） babel.docschina.org/docs/en/bab…

{
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    options: {
        presets: [["@babel/preset-env", {
            useBuiltIns: 'usage'
        }]]
    }
},

打包React 代码

@babel/preset-react

{
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    options: {
        presets: [['@babel/preset-env', {
            useBuiltIns: 'usage'
        }],
        '@babel/preset-react'
        ]
    }
},

结束语

webpack配置多且繁杂，基础配置只是冰山一角。从基础开始，一步步完善。

完整配置文件：github.com/huxuwei/web…