vuex webpack 配置_webpack4.29.x成神之路（二十二） 手动配置vue-cli上

本节开始用之前介绍的知识来搭建个vue开发环境，其实如果把基础篇的那些内容掌握，配合文档，完全可以自己搭建出来。

开始

新建一个空文件夹，并在文件夹下新建如下基本文件：

.gitignore：

node_modules

dist

.idea

.vscode

index.html：

Webpack

package.json：

{

"name": "webpack-train",

"version": "1.0.0",

"description": "webpack4",

"main": "index.js",

"scripts": {

"dev": "webpack-dev-server"

},

"keywords": ["webpack4"],

"author": "Madao",

"license": "ISC"

}

然后新建src目录，并在src下新建main.js(入口)和App.vue(根组件):

src/main.js:

import Vue from 'vue';

import App from './App.vue';

new Vue({

el: '#root',

render: h => h(App)

});

src/App.vue:

hello {{msg}}

export default {

name: 'App',

data() {

return {

msg: 'webpack'

}

}

}

在根目录下新建webpack.config.js:

const HTMLPlugin = require('html-webpack-plugin');

const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {

mode: 'development',

entry: './src/main.js',

// 起node服务

devServer: {

port: 4200

},

module: {

rules: [{

// 识别.vue文件

test: /\.vue$/,

loader: 'vue-loader',

}, {

// 用于识别vue文件中的script块

test: /\.js$/,

loader: 'babel-loader',

}, {

// 用于识别vue文件中的style块

test: /\.less$/,

/*

vue-style-loader基于style-loader

https://www.npmjs.com/package/vue-style-loader

*/

use: ['vue-style-loader', 'css-loader', 'less-loader']

}, {

test: /\.(gif|jpg|jpeg|png|svg|ttf|woff)$/,

loader: 'url-loader'

}]

},

plugins: [

new HTMLPlugin({

template: './index.html'

}),

// 将定义过的其它规则复制并应用到 .vue 文件里相应语言的块

new VueLoaderPlugin()

]

};

新建babel.config.js:

const presets = ["@babel/env"];

module.exports = { presets };

这是基本的开发环境配置，先安装下依赖看能否跑起来：

npm i webpack webpack-cli webpack-dev-server vue-loader vue-style-loader vue-template-compiler @babel/core @babel/preset-env babel-loader css-loader file-loader url-loader html-webpack-plugin less less-loader vue-loader -D

npm i vue

安装完成后npm run dev, 打开浏览器localhost:4200：

ok,开发环境大概的配置就完成了。

开启热更新，安装vue-router和vuex

热更新：修改webpack.config.js:

// 省略

const webpack = require('webpack');

devServer: {

port: 4200,

hot: true

},

// 省略

plugins: [

new HTMLPlugin({

template: './index.html'

}),

// 将定义过的其它规则复制并应用到 .vue 文件里相应语言的块

new VueLoaderPlugin(),

new webpack.HotModuleReplacementPlugin()

]

// 省略

安装vue-router和vuex：

npm i vue-router vuex

修改src/main.js:

import Vue from 'vue'

import App from './App.vue'

import Vuex from 'vuex'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

Vue.use(Vuex)

new Vue({

el: '#root',

render: h => h(App)

});

然后重新npm run dev即可。

区分配置

现在把开发配置和生产配置区分开，首先在根目录下新建build目录，并将webpack.config.js复制三份到build中，然后分别重命名：

修改build/webpack.dev.js:

const HTMLPlugin = require('html-webpack-plugin');

const VueLoaderPlugin = require('vue-loader/lib/plugin');

const webpack = require('webpack');

const {resolve} = require('path');

module.exports = {

mode: 'development',

entry: resolve(__dirname, '../src/main.js'),

// 起node服务

devServer: {

port: 4200,

hot: true

},

module: {

rules: [{

// 识别.vue文件

test: /\.vue$/,

loader: 'vue-loader',

}, {

// 用于识别vue文件中的script块

test: /\.js$/,

loader: 'babel-loader',

}, {

// 用于识别vue文件中的style块

test: /\.(css|less)$/,

/*

vue-style-loader基于style-loader

https://www.npmjs.com/package/vue-style-loader

*/

use: ['vue-style-loader', 'css-loader', 'less-loader']

}, {

test: /\.(gif|jpg|jpeg|png|svg|ttf|woff)$/,

loader: 'url-loader'

}]

},

plugins: [

new HTMLPlugin({

template: resolve(__dirname, '../index.html')

}),

// 将定义过的其它规则复制并应用到 .vue 文件里相应语言的块

new VueLoaderPlugin(),

new webpack.HotModuleReplacementPlugin()

]

};

修改package.json里的scripts属性：

"scripts": {

"dev": "webpack-dev-server --config build/webpack.dev.js"

},

然后npm run dev查看服务是否正常启动。

下节完善生产环境的配置，再抽出公共配置即可