1.前(fei)言(hua)

webpack是什么我在这里就不多说了，实在不知道的可以直接在去搜一下，都一大堆答案。关于用webpack怎么构建项目，方法也是多种多样，五花八门。今天，我就写下我平常构建项目的方式，这个方式我觉得比较便捷和简单粗暴，如果有什么要指出的，也欢迎大家评论，毕竟我也只是一个前端新人。

2.步骤

第一步，在目录建个文件夹

为了方便，我在编辑器打开这个目录了

第二步，创建package.json配置文件

输入命令行 $ npm init
依次输入，

从上往下就是，项目名称，迭代版本，项目说明，主入口文件，封装的可执行命令，作者的一些信息，源协议名称。
这应该就是最简单的配置文件了。

第三步，安装webpack依赖

如果之前没全局安装过webpack，就先安装一下

$ npm install webpack -g

然后安装项目依赖

$ npm install webpack --save-dev

然后就会看到package.json里面多了一行

这就说明安装成功了。

第四步，创建并配置webpack.config.js

创建webpack.config.js之前，先创建一个index.js和index.html,一个为入口文件，一个为普通的html文件
完了之后，目录就应该是这样的

在index.js里面写上这行测试用途的代码

document.write("hello world");

之后，创建一个webpack.config.js，代码如下

let path = require('path');
let webpack = require('webpack');
module.exports = {entry: './index.js',output: {path: path.join(__dirname, 'dist'), //输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它filename: "bundle.js"},module: {rules: []}
};

这个也应该是最基础的webpack.config.js了
然后执行 $ webpack
这个命令就是打包输出，执行完了之后，会看到，文件夹上多了一个dist文件夹，里面有个bundle.js，这个就是打包输出之后的文件夹和文件。需要的就是这些。

第五步，测试结果

在index.html引入之前输出的bundle.js。

最后，在随便一个浏览器，打开index.html

大功告成！上面这里写了很多，但实际上操作起来就是分分钟的事情，当然这是最简单的从零开始。

3.简单粗暴的搭建

如果真要最简单的构建项目，更简单的方法是，直接从别的项目拷贝package.json这个配置文件，然后执行

$ npm install

完了之后，在里面应该有配置的的，就都安装完成了，附上一段我常用的配置
package.json

{"name": "test3","version": "1.0.0","description": "测试版","dependencies": {},"devDependencies": {"babel-cli": "^6.10.1","babel-core": "^6.14.0","babel-loader": "^6.2.5","babel-preset-es2015": "^6.9.0","babel-preset-stage-0": "^6.5.0","babel-register": "^6.18.0","browser-sync": "^2.18.2","css-loader": "^0.25.0","ejs-compiled-loader": "^2.1.1","element-ui": "^1.2.5","extract-text-webpack-plugin": "^1.0.1","file-loader": "^0.9.0","glob": "^7.0.6","gulp": "^3.9.1","gulp-file-include": "^1.0.0","html-loader": "^0.4.3","html-webpack-plugin": "^2.22.0","iview": "^2.0.0-rc.5","node-sass": "^3.7.0","raw-loader": "^0.5.1","sass-loader": "^4.0.2","scss-loader": "0.0.1","style-loader": "^0.13.1","url-loader": "^0.5.7","vue": "^2.2.6","vue-loader": "^10.0.2","vue-resource": "^1.0.3","vue-router": "^2.4.0","vue-style-loader": "^1.0.0","vue-template-compiler": "^2.2.1","vuex": "^2.0.0","webpack": "^1.13.2","webpack-dev-server": "^1.15.1"},"scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack-dev-server --hot --inline"},"author": "chen"
}

webpack.config.js

let path = require('path');
let webpack = require('webpack');
let serverHost = "localhost";
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {entry: './src/index.js',output: {path: path.join(__dirname, 'dist'), //输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它publicPath: '/dist/',filename: "bundle.js"},//加载器module: {loaders: [{test: /\.vue$/,loader: "vue-loader"},{test: /\.html$/,loader: "raw-loader"},{test: /\.css$/,loader: 'style-loader!css-loader'},{test: /\.js$/,exclude: /node_modules/,loader: "babel-loader"},{test: /\.scss$/,loader: 'style-loader!css-loader!sass-loader'},{test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,loader: 'file-loader'},{//图片加载器，雷同file-loader，更适合图片，可以将较小的图片转成base64，减少http请求//如下配置，将小于8192byte的图片转成base64码test: /\.(png|jpg|gif)$/,loader: 'url-loader?limit=8192&name=images/[hash].[ext]'}]},vue: {loaders: {scss: ['vue-style-loader', 'css', 'sass'].join('!')}},plugins: [new HtmlWebpackPlugin({title:"test3",filename:"./dist/index.html",//输出html文件，打包时插入js,不用自己手动引入inject: 'body',  //js插入的位置，true/'head'/'body'/falsehash: true}),],//使用webpack-dev-serverdevServer: {contentBase: './',host: serverHost,port: 9090, //默认9090inline: true, //可以监控js变化hot: true//热启动},//使用vue2.x的一个配置resolve: {alias: {vue: 'vue/dist/vue.js'}}
};

大家执行$ webpack就知道大概的区别了。在运行dist里面的index.html，就知道区别了