
本文共 5265 字,大约阅读时间需要 17 分钟。
Webpack ���������������������
Webpack ��������������������������������������������������������������������������� JavaScript ������������������ Webpack ������������������������������������������������������������������������
1. ������ Webpack
������ npm ������������������������������������������ node.js ��� npm ���������������������������������������������������������������������
npm install --save-dev webpack webpack-cli vue vue-cli webpack-dev-server
���������
webpack
������������������������webpack-cli
���������������������vue
���Vue.js ���������vue-cli
���Vue.js ���������������������webpack-dev-server
���������������������������������������������������
������������������������������������������������������
2. ������ Loader ������
Loader ��� webpack ��������������������������������������������������������������� Loader���
babel-loader
��������� Babel ��������� JS���������@babel/core
���Babel ������������������@babel/preset-env
������������������������@babel/polyfill
��������������������������������� Polyfill���style-loader
��������� CSS ���������css-loader
��������� CSSMODULE���less-loader
��������� LESS ������������vue-loader
��������� Vue ���������vue-template-compiler
���Vue ������������������eslint-loader
���������������������������������
������������������������������������������������������ Loader���������������������������������������������JS������������ babel-loader
���CSS ������ css-loader
��� style-loader
���
3. ������ Plugin ������
Plugin ��������� webpack ������������������������������������������������������������������������ Plugin���
html-webpack-plugin
��������� HTML ���������clean-webpack-plugin
������������������������copy-webpack-plugin
������������������������
������ Plugin ������������������������������������������������������������������������������������������������������������������ copy-webpack-plugin
���������������������������������������������������������������������
4. ������������
���������������������������������������������������������������������
4.1 ������������������
- ������
webpack.common.js
��������������������������� - ������������
webpack.dev.js
���webpack.prod.js
���������������������������������
4.2 ������������
��� webpack.common.js
���������������������������������������������������
module.exports = { // ... module: { rules: [ { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, { test: /\.vue$/, use: 'vue-loader' }, // ������ CSS ��� LESS { test: /\.css$/, use: 'css-loader' }, { test: /\.less$/, use: 'less-loader' } // ������������������������������ ] } // ...}
4.3 ������������
���������������������������������������
module.exports = { output: { path: './dist/', filename: '[name].js', // ������������������gist ��������� }}
4.4 ���������������������
������ webpack-dev-server
���������������������������
const webpackDevServer = require('webpack-dev-server');const config = { devServer: { hot: true, // HMR ������������ port: 3000, host: '0.0.0.0', https: false }}module.exports = merge(config, { // ������������������});
4.5 ������������
������ DefinePlugin
������������������������
const webpack = require('webpack');module.exports = { // ... plugins: [ new webpack.DevServerPlugin({ errorInfoHandling: 'off', quiet: false }) ]}
4.6 ���������������
��� webpack.dev.js
��� webpack.prod.js
������������������������������������������
4.7 Linting
������ ESLint ���������������������
npm install --save-dev eslint eslint-loader
��� webpack.common.js
��������� ESLint ���������
const eslint = require('eslint');module.exports = { // ... plugins: { eslint: { files: ['**/*.js', '**/*.vue'], // ��������������������������� parserOptions: { ecmaVersion: 'latest', sourceType: 'module' } } }};
5. ������ npmScript
������������������ package.json
���������������������������
{ "scripts": { "build": "webpack --config webpack.prod.js", "start": "webpack-dev-server --config webpack.dev.js", "clean": "rm -rf dist/*", "lint": "eslint ." }}
5. HMR ��� Source Map
������ HMR ���������������������
const webpackDevServer = require('webpack-dev-server');module.exports = { devServer: { hot: true, // HMR ������ historyApiFallback: true, // ������ HMR ��������������� // ... }};
������ Source Map ������������������������������
��� package.json
������������������
{ "scripts": { "start": "npx webpack-dev-server --config webpack.dev.js -- HotOnly" }}
5. ������-treeShaking
���������������������������������������������������������������
module.exports = { // ... devtool: 'source-map', // ...}
���������������������������
module.exports = merge(config, { optimization: { minimize: true }});
6.���������������
- ������������������������
@babel/preset-env
������������������������������������ - ������������������������������������ HTML ���������������������������������������
- ������������������������������������������������������������������������������������
������������������������������������������������������ Webpack���������������������������������
发表评论
最新留言
关于作者
