使用 Webpack 实现 Vue 项目打包流程
发布日期:2021-05-10 22:42:23 浏览次数:19 分类:精选文章

本文共 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���������������������������������

上一篇:Vue 首次渲染过程简述
下一篇:创投圈高端词汇收集(持续更新中)

发表评论

最新留言

关注你微信了!
[***.104.42.241]2025年04月30日 08时09分50秒