webpack项目部署步骤

1.本地电脑安装webpack 

1.1首先安装node 官网下载安装好 命令行输入node-v 出现如下版本号即成功安装

1.2 安装webpack  

//全局安装

命令行输入 npm install webpack -g

2.安装webpack到项目

1.1 webstorm打开项目 或者命令行进入项目目录 

1.2 输入命令  npm install --save-dev webpack

3.根目录下创建package.json文件

命令行输入 npm init

4.根目录下创建webpack.config.js

现在要使用到Loaders

1.安装可以转换JSON的loaders

输入命令 npm install --save-dev json-loader

2.安装babel 用于解析ES6

输入命令 npm install --save-dev babel-core babel-loader babel-preset-es2015 

3.安装css-loader和style-loader

输入命令 npm install --save-dev style-loader css-loader

4.安装css预处理平台 postcss-loader

输入命令 npm install --save-dev postcss-loader autoprefixer

5.安装sass和node-sass

注:windows系统使用sass要先安装ruby 具体教程百度，安装node-sass之前要先安装cnpm 通过cnpm install node-sass来安装

输入命令 npm install --save-dev sass-loader node-sass

webpack.config.js配置如下图

module.exports = {
    entry:  __dirname + "/src/js/main.js",//已多次提及的唯一入口文件
    output: {
        path: __dirname + "/dist/js",//打包后的文件存放的地方
        filename: "output.js"//打包后输出文件的文件名
    },
    module: {//在配置文件里添加JSON loader
        loaders: [
            {
                test: /\.json$/,
                loader: "json"
            },
            {
                test: /\.css$/,
                loader: 'style!css?modules!postcss'//添加对样式表的处理
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.scss$/,
                loaders: ["style", "css", "sass"]
            }
        ]
    },

    postcss: [
        require('autoprefixer')//调用autoprefixer插件
    ]
}

4.在项目根目录新建src文件夹和dist文件夹，src文件夹用于存放源代码 dist文件夹用于存放给浏览器读的代码，目录结构如图