共计 3193 个字符，预计需要花费 8 分钟才能阅读完成。
vue-cli2 中次要是用到 webpack 的两个外围性能是模块化、打包。比方在每个 js 文件中，同时定义一个变量 var x = “hello”，在调用文件中批改这个变量，两个文件的变量 x 都被扭转了，造成了全局净化，这只是一个简略的例子；其实模块化，咱们本人不必 webpack 也是能够解决的，比方每个 js 文件用自执行函数来包起来，造成一个独立的作用域。然而这样很麻烦、也不好保护和扩大；以下手动搭建 webpack 根底我的项目的步骤：（如有谬误，评论区留言纠正，摘于本人的笔记，可能比拟糙）
1、首先，webpack 是依赖于 node，所以必须要装置 node, node 里蕴含 npm，当然也能够 yarn，其实当初 yarn 和 npm 的性能差不多;
输出指令 node -v 查看是否装置 node,
2、全局装置 webpack, 输出指令进行全局装置 npm i -g webpack@3.6.0 , 只有是终端输出命令就是调用全局的 webpack (vue-cli2 就是用 webpack@3.6.0), 同样通过指令 webpcak - v 查看装置版本。装置实现后，就能够进行打包了，通过指令：
webpack ./src/main.js(打包文件) ./dist/bundle.js(输入文件)。// .main.js 是须要打包文件 bundle.js 是输入文件
webpack 在打包的时候，会在 main.js 文件中，找到文件中引入的依赖，没有调用的依赖，不进行打包。3、其实能够通过创立 webpack.config.js 文件，来指定须要打包的文件和输入的文件；
const path = require("path");
module.exports = {
// entry: "./main.js", // 入口
entry: {app: "./main.js" // 这样配置就打包成 app.js}
output: { // 输入
filename: "bundle.js",
path: path.resolve(__dirname, "./dist") // 绝对路径
}
}
4、步骤 3 用到 path, 所以须要执行命令 npm init 进行初始化, 并且会多产生一个 package.json 文件和 node_modules 文件夹，先不论，前面会用到它；
5、在进行装置 loader 或者 plugin 之前, 须要装置在本地装置一下 webpack, 命令：npm i -D webpack@3.6.0
起因 -> 1、如果这个时候须要通过 webpack 来进行打包的话，实现 1234 步骤后，按理只须要输出 webpack 进行打包就能够，然而在终端输出的指令都是调用全局装置的 webpack;
2、可能本地 webpack 和全局的版本不一样，如果本地插件版本是依赖 webpack@3.6.0, 而全局 webpack 的版本是 @4.1.0 的话, 到时候打包可能就存在 loader 和 plugin 版本不兼容的问题；6、接下来就是装置 loader, 用来加载和解析各种格局的文件，装置 loader 有两个步骤：
-> npm i -D xxx-loader
-> 配置 webpack.config.js 文件
例如:
首先 npm 装置 less 的 loader，输出指令 npm install less less-loader --save-dev，或者指令版本的 npm install less@3.9.0 less-loader@4.1.0 --save-dev
而后配置 webpack.config.js 文件：module.export = {
module: {
rules: [
test: /\.less$/i,
use: ["style-loader", "css-loader", "less-loader"] // 数组的执行程序是从右往左顺次执行的
]
}
}
这里举荐一些根本的 loader
style-loader 将模块导出的内容作为款式并增加到 DOM 中；css-loader 加载 CSS 文件并解析 import 的 CSS 文件，最终返回 CSS 代码；less-loader 加载并编译 LESS 文件 (类似的有 sass-loader 加载并编译 SASS/SCSS 文件)；babel-loader 应用 Babel 加载 ES2015+ 代码并将其转换为 ES5
file-loader file-loader 将文件发送到输入目录; 个别用来加载小图片，通常设置为 8 -10k, 在设置的范畴内的，图片会转换成 base64 格局进行加载
url-loader 将文件作为 data URI 内联到 bundle 中; 图片过大的化，就能够用 url-loader 来加载，像视频 | 音频 | 字体都能够加载；vue-loader vue-template-compiler 别离用来 vue 文件的加载和 vue 的模板编译
7、在 package.json 外面配置 scripts 配置，并指定编译文件；
"scripts": {
"test": "echo \"Error: no test specified\"&& exit 1",
"build": "webpack --config ./build/webpack.prod.config.js",
"dev": "webpack-dev-server --progress --open --config ./build/webpack.dev.config.js" //--progress 编译进度条，也能够写在配置文件外面 --open 是主动关上浏览器
},
其中 build 项配置，跟以下同理
const webpack = require("webpack");
const config = require("./build/webpack.prod.config.js");
webpack(config, (err, stats) => {// 外面能够写一些打包异样的捕捉})
而后通过 node xxx.js 来执行这个文件，性质是一样的，vue-cli2 就是这么做的；以上步骤解决完之后，就是通过 npm run dev 运行和通过 npm run build 进行编译；应用 webpack-dev-server 跟 loader 的两个步骤一样
1、npm install --save-dev webpack-dev-server
2、增加 devServer 属性配置：const path = require('path');
module.exports = {
mode: 'development',
entry: {app: './src/index.js',},
devServer: {
contentBase: './dist',
inline: true,
compress: true,
port: 9000,
open: true,
},
output: {filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
};
8、抽离 开发配置和打包配置，别离抽离步骤 7 用的两个文件，webpack.prod.config.js 和 webpack.dev.config.js，以及公共配置文件 webpack.base.config.js；
配置文件格式有两种格局，个别是对象，如果亚勇 env 变量就须要转换成一个函数的模式，如下：const path = require("path"); //node 包外面的，通过指令 npm init 初始化
module.exports = (env) => {console.log('Goal:', env.goal); // 'local'
console.log('Production:', env.production); // true
return {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
};以上步骤实现后，根本的 webpack 我的项目就搭建实现了。