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文件夹用于存放给浏览器读的代码，目录结构如图