第一步配置webpack：
打开命令行，在指定文件夹下运行npm init,直接回车
npm install --save-dev webpack
npm install --save-dev -webpack-dev-server
在package.json里配置dev：webpack-dev-server --open --config webpack.config.js
新建文档webpack.config.js
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var config = {
entry: {
main: './main'
},
output: {
path: path.join(__dirname, './dist'),
publicPath: '/dist/',
filename: 'main.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
css: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'vue-style-loader'
})
}
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'style-loader'
})
},
{
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
loader: 'url-loader?limit=1024'
}
]
},
plugins: [
new ExtractTextPlugin("main.css")
]
};
module.exports = config;
下载插件 npm install --save-dev extract-text-webpack-plugin
package.json配置如下：
{
"name": "daily",
"version": "1.0.0",
"description": "daily",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --history-api-fallback --config webpack.config.js",
"build": "webpack --progress --hide-modules --config webpack.prod.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.23.0",
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.0",
"babel-runtime": "^6.23.0",
"css-loader": "^0.27.3",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.10.1",
"html-webpack-plugin": "^2.28.0",
"request": "^2.81.0",
"style-loader": "^0.16.1",
"url-loader": "^0.5.8",
"vue-hot-reload-api": "^2.0.11",
"vue-loader": "^11.3.4",
"vue-style-loader": "^2.0.5",
"vue-template-compiler": "^2.2.6",
"webpack": "^2.3.2",
"webpack-dev-server": "^2.4.2",
"webpack-merge": "^4.1.0"
},
"dependencies": {
"axios": "^0.16.1",
"vue": "^2.2.6"
}
}
直接npm install安装所需模块