webpack入门

简单的说webpack就是类似于grunt和gulp的打包工具，在看了师傅的教程已经官网的全英文文档以后终于有了一个入门的了解

 1.新建一个文件夹并进入初始化它

mkdir webpack-bundel &&cd webpack-bundel
npm init -y

 此时你的命令行就一路狂奔你毫无阻碍，然后你的根目录就会出现一个package.json文件，并有相关的配置

2.npm install   安装相关的依赖文件

3.在根目录下写一个index.html文件可以先写个<h1>hello webpack</h1>

4.在根目录下写一个webpack.config.js的文件如下：

var path = require('path');

module.exports = {
  entry: './app/index.js',  //文件入口
  output: {
    filename: 'bundle.js',  //输出文件
    path: path.resolve(__dirname, 'dist')  //文件构建完以后输出到dist/bundel.js文件里
  },

};

此时在index.html中加入

<script src="dist/bundle.js">

把打包好的文件加入到index.html中

6.写入口文件index.js

function component () {
  var element = document.createElement('div');

  element.innerHTML ="Hello react";

  return element;
}

document.body.appendChild(component());

5.运行程序  

$ webpack

运行结果：

Hash: 69678160dc7b8419bc3b
Version: webpack 1.14.0
Time: 42ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.79 kB       0  [emitted]  main

此时在浏览器运行index.html就可以了。

6.ok我现在想加入样式，例如我在app下新建了一个index.css

body{
  width:500px;
  height:200px;
  border: 1px solid #ddd;
  color:olive;
}

我现在运行webpack在浏览index.html发现有错误，那是因为我需要安装加载器

$ npm install css-loader style-loader 

好了，我现在在index.html中

require("./index.css"); 

发现根本不行运行不了，此时解决方法有两种

第一种：

require("!style-loader!css-loader!./index.css"); 

第二种：在webpack.config.js中

  loaders:[
      { test: /\.css$/, loader: 'style-loader!css-loader' },
    ]

建议用第二种方法，因为这样不用每次手动在require()手动加一堆

!style-loader!css-loader!

现在再webpack,浏览index.html发现已经能渲染css了

7.现在我想加入一些插件

cnpm install webpack --save-dev

cnpm install extract-text-webpack-plugin --save-dev

在webpack.config.js中添加

var webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

  plugins: [
          new webpack.BannerPlugin('这个插件用来写几个字'),
          // ExtractTextPlugin，抽取CSS代码
          new ExtractTextPlugin("bundle.css"),
          // CommonsChunkPlugin，抽取JS公共代码
          new webpack.optimize.CommonsChunkPlugin({name: "commons", filename: "commons.js"}),
          // UglifyJsPlugin，压缩JS代码
          new webpack.optimize.UglifyJsPlugin(),

      ],

运行webpack就会自动抽取js、css文件
8.我现在感觉每次修改完代码又得重新webpack打包真麻烦，不用着急，有了这个就可以自动构建了在webpack.config.js中添加

const hotMiddlewareScript = 'webpack-hot-middleware/client?reload=true';
const HtmlWebpackPlugin = require('html-webpack-plugin');

new HtmlWebpackPlugin({template: './index.html'}),
new webpack.HotModuleReplacementPlugin()

好了，现在只要index.html文件中有变动就会自控构建，但是我希望所有的文件变动都能检测，并且可以自动刷新

9. hmr热替换

cnpm install webpack-dev-server --save-dev

在webpack.config.js里添加

const webpackDevServer = require('webpack-dev-server');
const config = require("./webpack.config.js");

devServer: {
          contentBase: path.join(__dirname, "abc"),
          compress: true,
          port: 1111
      }

ok运行

webpack-dev-server

这样运行后再http://localhost:1111中浏览在abc目录下只要改变浏览器就会自动刷新