构建工具

一、项目准备

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'

    }

},