一、項(xiàng)目準(zhǔn)備

1、創(chuàng)建目錄

2、初始化

npm init? ? →? ? package.json

3、創(chuàng)建業(yè)務(wù)目錄

app→js→main,App.vue **

app→css→reset.css

app→vues→index.html

二、創(chuàng)建配置文件

1、創(chuàng)建配置文件

webpack.config.js

2、文件配置

基礎(chǔ)配置

entry: {? ? //入口，表示webpage要構(gòu)建哪個(gè)文件

????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'? ? //多個(gè)loader串行解析，順序從右向左

? ????}]

????},

plugins: [],? ? //插件

output: {? ? //輸出

????filename: '[name].min.js',

? ????path: path.resolve(__dirname, 'dist')? ? //resolve表示相對(duì)路徑，__dirname表示當(dāng)前目錄

}

進(jìn)階配置

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 時(shí)需用'vue/dist/vue.common.js'

? ? }

},