When setting up the project with a vue vue-cli1 / 2, you can see there are a lot of documents on webpack configuration. We do not know those tedious configuration file what role, simply enter the console npm run dev, automatically start the project, we could happily write business code.
Although vue-cli help us do everything we can not learn webpack yet? NoNoNo ... modern front-end engineers the necessary skills is packaged modular building project, to those who do not believe in the front JD recruitment site to see. Ado, let's build a simple vue-cli with webpack.
Step 1: Install NodeJS (webpack based NodeJS)
Download: http://nodejs.cn/download/ , fool installation, the next step would have been ok. Installed in the console input node -vto check whether according to success.
NodeJS is a JavaScript runtime environment, like a web browser. After the installation can
noderun JavaScript code commands, such as:node a.js
npm (node package manage of JavaScript) action: Node.js comes after downloading NPM, similar Thunder Resources, can download the program module relies / package.
- NPM allows users to download from the server written by someone else third-party packages to local use.
- It allows users to download and install the command-line program written by someone else to use local NPM from the server.
- It allows users to write their own bag or command line program NPM uploaded to the server for others to use.
npm is abroad, may be slow, it is recommended to install cnpm, installation method: npm install -g cnpm --registry = https: //registry.npm.taobao.org
Step two: npm initInitialization generate package.json
- First, create an empty project folder,
- Into the folder
shift+右击appears [open a command window (W) here], - Click into the
cmdconsole, the command is the path to the current folder directory, - Then enter
npm init -y, enter, after a package.json created in the root directory.
package.json used to store the entire project is dependent module / pack, when we migrate the entire project to the other places, the project required runtime module / pack according to package.json dependent parameters are automatically downloaded.
Step 3: Install webpack
command:npm install [email protected] --save-dev
Webpack testing is available locally, webpack -vif there is webpacan invalid command is k, then use the global install webpack: npm install [email protected] -g. After a successful installation can use the webpackcommand to play a.
The proposed installation wepack3, webpack4 compatible vue-cli is not very good
webpack packer module can be seen: it to do is analyze your project structure, expand find language (Scss, TypeScript, etc.) JavaScript modules as well as some other browsers can not run directly and convert and packaged as appropriate format for the browser to use.
Grunt and Gulp works is: in a configuration file, specify the file for some specific steps similar compilation, combination, compression and other tasks, these tasks can be done automatically for you after tool.
Step four: webpack packaged module
Many file types, such vue, css, img, font ... we need to configure the loader to complete properly parse and packaged.
For example, the package to css js file, you need to install css loader installation command: npm install --save-dev style-loader css-loader
css-loaderand style-loader, both deal with different tasks
css-loaderso that you can use similar @import 和 url(...)methods to achieve require()functional
style-loaderstyles after all calculations by <style></style>adding pages, two are grouped together so that you can put the style sheet embedded JS file after webpack Packing
command-line package (not recommended):
webpack {entry file} {destination for bundled file} // 如webpack ./js/main.js ./dist/bundle.js 自动创建dist目录To specify when such a packaging, the introduction of css files js file loader: require('style-loader!css-loader!../css/index.css')Note that the order can not be wrong!
Configuration files are packaged (recommended):
you need to create webpack.config.js in the root directory of the project was configured as follows:
module.exports = {
entry: __dirname + "/src/main.js",// 入口文件，可以多个
output: {
path: __dirname + "/dist", // 绝对路径，打包后的文件存放的文件夹
filename: "build.js" // 相对路径，打包后输出的文件
},
// 1. 不同webpack版本配置loader的方式不同，webpack3用loaders，webpack4用rules
// 2. 命令行方式引入css的require('style-loader!css-loader!../css/index.css') 就可以写成 require('../css/index.css')
module: {
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.(jpg|png|jpeg|svg)$/,
loader: 'url-loader',
options: {
// 大于10000字节会被打包成重命名的图片资源，否则打包成base64
limit: 10000
// name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: ['env'], // 处理关键字，es6/7/8/9...都能转化
plugins: ['transform-runtime'] // 处理函数
}
}
]
}
}package.json configured
scripts:{"build": 'webpack'}(webpackcommand will run the defaultwebpack.config.jsfile), executionnpm run buildcan pack up
Step five: to build webpack server
The above four steps to complete the task of packaging projects, but also need to further configure the development environment.
webpack-dev-serverCan be like php / java / .net ... the same build as we build a server, so that you can update the hot item code, real-time operation of the project. This helps us debug the project.
- installation:
npm install webpack-dev-server -g - Write to rely on:
npm install webpack-dev-server --save-dev - Configuration command:
scripts:{"dev": 'webpack-dev-server --hot --inline'}// realize hot update and compile online - Run the command:
npm run dev - Enter localhost: 8080 / run ... // default port webpack-dev-server 8080
See specific code: https://github.com/cwh2407606301/webpack-vue-cli
Finally, webpack version updates very frequently, various npm package also updated very frequently, which can lead to a compatibility problem, frequently on the error, this is a headache, it is easy to lead from entry to give up. Patience, patience, patience ....