Webpack 2.0前端项目搭建教程

Webpack 2.0 的模块打包能力真的挺强，尤其是用来搭前端项目的时候，省心不少。只要你稍微熟点 Node 和 npm，搭一个项目环境简直不要太顺。

初始化项目先来个npm init，装上 Webpack：npm install webpack --save-dev，就能开始折腾了。对了，Webpack 最核心的一个点是loader，用来搞定各种资源的转换，比如 CSS、图片、Stylus 这些。

比如说，你想用 Stylus，还想加点自动补前缀的操作，那就得装这些：

npm install style-loader css-loader stylus --save-dev
npm install --save-dev postcss-loader autoprefixer

在webpack.config.js里做个基本配置，像下面这样：

const path = require('path');
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      },
      {
        test: /\.styl(us)?$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'stylus-loader']
      }
    ]
  }
};

项目结构怎么建？一般就是src放源码，build是打包后的东西。入口文件main.js放在src里，样式文件随你喜欢。

为了提高效率，推荐装上webpack-dev-server：npm install --save-dev webpack-dev-server，在package.json里加上启动命令：

"scripts": {
  "start": "webpack-dev-server --open --hot"
}

这样运行npm start就能一边写代码一边实时预览页面，自动刷新，爽。嗯，用久了你会发现 Webpack 真的是个挺灵活的工具。想打包图片、用 TypeScript 也都能搞，只要配置对。

如果你刚好在搭建前端项目，又想资源管理别太乱，Webpack 2.0 的这套思路可以拿来直接用。