搭建自己的Webpack前端构建工具

开发工具
留言

前端开发技术的更新速度可谓是越来越快，前段时间还在用Gulp打包工具，转眼间Webpack就要一统江湖了。为了体验一下webpack新技术带来的好处，于是就用webpack搭建了一款适合自己使用的前端脚手架，主要用于提高开发速度。在前端开发中切记不要因为某种新技术很火就盲目跟风的在实际项目中使用，而是要根据项目自身特点来选择工具。

网上关于webpack工具的使用教程也是非常多，写下此篇博客的目的是记录下自己的搭建过程，熟悉webpack工具打包流程并用于交流。目前配置的是适用于多个项目的单页应用。其中React-app是用于快速构建基于webpack打包的React项目，暂不做介绍。
工具的基本功能：

  1. 能转化ES6代码，能分离打包并压缩js文件
  2. 支持sass预编译，能分离打包并压缩css文件
  3. 支持图片压缩
  4. 支持HTML模板，并压缩输出
  5. 开发过程中开启静态服务器并启动热更新，实时调试

环境搭建

初始化

默认已安装node
新建项目文件夹及package.json文件

mkdir webpack
cd webpack
npm init

一路回车，按需填写即可。

全局安装

这里为了构建多项目并行开发需要全局安装webpack和webpack-dev-server

npm i -g webpack@2.2.1 webpack-dev-server@2.5.0

安装依赖包

这里都指定了安装版本，在配置的时候就不会因为依赖包的升级而导致不能用

npm i --save-dev 
    autoprefixer@7.1.1
    babel-core@6.25.0
    babel-loader@7.1.0
    babel-preset-env@1.5.2
    css-loader@0.28.4
    extract-text-webpack-plugin@2.1.2
    file-loader@0.11.2
    html-webpack-plugin@2.29.0
    node-sass@4.5.3
    postcss-loader@2.0.6
    style-loader@0.18.2
    webpack@2.2.1
    webpack-dev-server@2.5.0

新建配置文件

新建项目文件夹及webpack.config.js文件

mkdir Demo
cd Demo

webpack.config.js

const path = require("path");
const webpack = require('webpack');
//html模板插件 详见https://www.npmjs.com/package/html-webpack-plugin
const htmlWebpackPlugin = require('html-webpack-plugin');
//代码分离插件 详见https://www.npmjs.com/package/extract-text-webpack-plugin
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  //错误定位
  devtool: '#cheap-eval-source-map',
  //程序入口文件  其他详细配置参见http://webpack.github.io/docs/configuration.html#entry
  entry: __dirname + '/src/js/main.js',
  //程序出口文件  其他详细配置参见http://webpack.github.io/docs/configuration.html#output
  output: {
    path: path.join(__dirname, "dist"),
    filename: 'js/bundle-[hash:5].js',
    // 用户添加CDN
    // publicPath:'http://cdn.com/'
  },
  // webpack-dev-server配置 详见https://webpack.js.org/configuration/dev-server/
  devServer: {
    //设置服务器主文件夹，默认情况下，从项目的根目录提供文件
    contentBase: path.join(__dirname, "dist"),
    //使用inlilne模式
    inline: true,
    //当编译错误的时候，网页上显示错误信息
    overlay: {
      warnings: true,
      errors: true
    },
    //设置域名，默认是localhost
    // host: "10.74.138.249",
    // port: 3000
  },

  module: {
    rules: [{
      test: /\.(js|jsx)$/,
      include: [
        path.join(__dirname, "src")
      ],
      loader: 'babel-loader',
      query: {
        presets: ['env']
      }
    }, {
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          {
            loader: 'css-loader',
            options: {
              minimize: true //css压缩
            }
          }, {
            loader: 'postcss-loader',
            options: {
              plugins: function () {
                return [require('autoprefixer')]
              }
            }
          }
        ]
      })
    }, {
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    }, {
      test: /\.(png|jpe?g|gif)$/i,
      use: [{
        loader: 'file-loader',
        query: {
          limit: 10000,
          name: './img/[name]-[hash:5].[ext]'
        }
      }]
    }]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    // webpack.optimize.CommonsChunkPlugin(),
    new htmlWebpackPlugin({
      template: 'src/index.html',
      inject: 'body',
      minify: {
        removeComments: true,
        collapseWhitespace: true
      }
    }),
    new ExtractTextPlugin('css/common.css')
  ]
}

目录结构

|--Demo
|  |--dist/
|  |--src
|     |--css/
|     |--js/
|     |--index.html
|  |--webpack.config.js
|--React-app/  //react项目暂不做介绍
|--package.json

如何使用

以上这些内容只是对webpack脚手架工具的构建过程的基本介绍，当然如果你想使用的话也可以直接下载使用

//下载webpack脚手架工具
git clone git@github.com:Jess121/Webpack.git
//安装依赖 在此之前需要全局安转webpack和webpack-dev-server
npm i -g webpack@2.2.1 webpack-dev-server@2.5.0 
npm install
//启动项目，输入以下命令会自动打浏览器并访问localhost:8080(而配置中未修改host和port)
webpack-dev-server --open
//打包项目，并展示打包进度
webpack --progress

PS: 以上展示的是脚手架工具的基本功能，其他功能结合项目需要后期在做补充