npm 是时下最流行的js安装包管理工具，而webpack则是近两年崛起的模块加载和打包工具。
这两个工具一起使用能大大提高我们前端的生产效率，现在就来讲讲如何用这两个工具初始化项目，提高我们的开发效率。
注意：本文的前提是开发机器已经安装过nodejs和npm , 对npm 有一定了解。
1.初始化npm 的package.json文件：
先在项目目录下打开命令行，执行
npm init
根据提示完成项目的初始化，系统会自动生成一个 package.json 文件。
2.安装 webpack 和 webpack-dev-server：
执行
npm install webpack –save-dev
npm install webpack-dev-server –save-dev
安装完成后， 可以看到package.json文件中的 devDependencies中有webpack和webpack-dev-server以及他们对应的版本。
node_modules文件夹中也安装了对应的依赖包。
3.配置webpack：
在当前目录下，创建config文件夹，作为webpack配置文件存放目录。
创建webpack.config.js、webpack.dev.config.js、webpack.build.config.js三个文件，dev和build两个文件会引用config.js，分别对应开发和生产打包时对应的webpack配置。
webpack.config.js ：
let path = require(‘path’);
let ExtractTextPlugin = require(‘extract-text-webpack-plugin’);
let HtmlWebpackPlugin = require(‘html-webpack-plugin’);
let config = {
entry : {
bootstrap : [path.join(__dirname, ‘../src/bootstrap.js’)]
},
output : {
filename : ‘[name].[chunkhash].js’,
path : path.join(__dirname, ‘../dist’),
publicPath : ‘’
},
module: {
rules : [
{
test : /.js$/,
enforce : ‘pre’,
exclude : /node_modules/,
loader : ‘eslint-loader’,
options : {
emitWarning : true
}
},
{
test : /.js$/,
exclude : /node_modules/,
use : ‘babel-loader’
},
{
test : /.css$/,
use : ExtractTextPlugin.extract({
fallback : ‘style-loader’,
use : ‘css-loader’
})
},
{
test : /.html$/,
use : ‘html-loader’
}
]
},
plugins : [
new HtmlWebpackPlugin({
template: path.join(__dirname, ‘../src/index.html’)
})
],
resolve : {
modules : [
path.join(__dirname, ‘../src’),
path.join(__dirname, ‘../node_modules’)
]
}
};
module.exports = config;
可以看到里面用了几个webpack的plugin，这些plugin在使用之前必须安装：
npm install ExtractTextPlugin –save-devnpm install HtmlWebpackPlugin –save-dev
eslint-loader是做语法检查的，可以帮助检测我们的代码是否规范，但是使用之前要安装eslint 和 eslint-loader：
npm install eslint –save-devnpm install eslint-loader –save-dev
使用eslint同时，必须添加eslint的配置文件 , .eslintrc.json ：
{“env”: {
“browser”: true,
“commonjs”: true,
“es6”: true,
“jasmine”: true,
“protractor”: true,
“phantomjs”: false
},
“extends”: “eslint:recommended”,
“parserOptions”: {
“sourceType”: “module”
},
“rules”: {
“curly”: “error”,
“indent”: [
“error”,
4,
{
“SwitchCase”: 1
}
],
“quotes”: [
“error”,
“single”
],
“semi”: [
“error”,
“always”
]
}
}
babel是用来打包js，并且可以将es6 转为之前兼容的js，但是使用之前也必须安装：
npm install babel-loader –save-dev
而且babel也必须要一个配置文件 .babelrc ：
webpack.dev.config.js
let config = require(‘./webpack.config.js’);
const port = 12000;
config.devtool = ‘inline-source-map’;
config.devServer = {
historyApiFallback : true,
contentBase : ‘./src’,
host : ‘0.0.0.0’,
port,
inline : true
};
module.exports = config;
其中的port是配置本地开发的端口。我配的是12000，在启动服务之后，可以通过 localhost:12000 调试开发环境。
webpack.build.config.js
let webpack = require(‘webpack’);
let config = require(‘./webpack.config.js’);
config.devtool = false;
config.plugins.push(new webpack.LoaderOptionsPlugin({
minimize: true,
options: {
htmlLoader:{
minimize: true,
removeAttributeQuotes: false,
caseSensitive: true
}
}
}));
config.plugins.push(new webpack.optimize.UglifyJsPlugin({
beautify : false,
output : {
comments : false
},
compress : {
warnings : false
}
}));
module.exports = config;
4.添加业务模块和文件：
我们在webpack.config.js中配置的是读取src文件夹中的bootstrap.js作为应用入口，而index.html作为主页面。
现在可以创建src文件夹，然后创建bootstrap.js和index.html文件。
如若要引用其他的模块，可在npm install 该模块之后 在 bootstrap.js中 import。
最后执行
npm run dev
命令 即可启动开发环境，启动之后可在 localhost:12000中预览。
开发过程中，要根据相应的文件安装相应的loader，然后用loader打包相应文件。
如果最后开发完成，要打包，执行
npm run build
命令即可将应用打包到dist文件夹中。