一、项目准备
1、创建目录
2、初始化
npm init → package.json
3、创建业务目录
app→js→main,App.vue **
app→css→reset.css
app→vues→index.html
二、创建配置文件
1、创建配置文件
webpack.config.js
2、文件配置
基础配置
entry: { //入口，表示webpage要构建哪个文件
app: './app/js/main.js'
},
module: { //配置loader
loaders: [{
test: /\.html$/,
loader: 'html-loader'
},{
test: /\.vue$/,
loader: 'vue-loader'
},{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader' //多个loader串行解析，顺序从右向左
}]
},
plugins: [], //插件
output: { //输出
filename: '[name].min.js',
path: path.resolve(__dirname, 'dist') //resolve表示相对路径，__dirname表示当前目录
}
进阶配置
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
},
resolve: {
extensions: [".js", ".json", ".vue", ".scss"],
alias: {
'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用'vue/dist/vue.common.js'
}
},
