webpack 1 基础配置教程

webpack

webpack简单点来说就就是一个配置文件，所有的魔力都是在这一个文件中发生的。 这个配置文件主要分为三大块

• entry 入口文件 让webpack用哪个文件作为项目的入口

• output 出口 让webpack把处理完成的文件放在哪里

• module 模块 要用什么不同的模块来处理各种类型的文件

---

• html plugin: html-webpack-plugin npm install html-webpack-plugin --save-dev

  var path = require('path');
  var HtmlwebpackPlugin = require('html-webpack-plugin');
  //定义了一些文件夹的路径
  var ROOT_PATH = path.resolve(__dirname);
  var APP_PATH = path.resolve(ROOT_PATH, 'app');
  var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
  
  module.exports = {
  //项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
  entry: APP_PATH,
  //输出的文件名 合并以后的js会命名为bundle.js
  output: {
    path: BUILD_PATH,
    filename: 'bundle.js'
  },
  //添加我们的插件 会自动生成一个html文件
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Hello World app'
    })
  ]
  };

• webpack-dev-server: 当代码更新的时候自动刷新浏览器。npm install webpack-dev-server --save-dev

  module.exports = {
  ....
  devServer: {
    host: '127.0.0.1',
    port: '8099',
    historyApiFallback: true
  },
  ...
  }

  package.json 里面配置一下运行的命令,npm支持自定义一些命令

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

• 添加css样式
  现在来添加一些样式，webpack使用loader的方式来处理各种各样的资源，比如说样式文件，我们需要两种loader，css-loader 和 style－loader，css-loader会遍历css文件，找到所有的url(…)并且处理。style-loader会把所有的样式插入到你页面的一个style tag中。

  安装loader npm install css-loader style-loader --save-dev

  webpack.config.js中添加loaders

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

  看loaders的书写方式，test里面包含一个正则，包含需要匹配的文件，loaders是一个数组，包含要处理这些程序的loaders，这里我们用了css和style，注意loaders的处理顺序是从右到左的，这里就是先运行css-loader然后是style-loader.

  sass-loader npm install sass-loader node=sass --save-dev

  webpack.config.js中添加loaders 删除css处理，添加下面代码

  ...
  module: {
  loaders: [
    {
      test: /\.scss$/,
      loaders: ['style-loader', 'css-loader', 'sass-loader'],
      include: APP_PATH
    }
  ]
  },
  ...

• 处理图片和其他静态文件

  安装loader，处理文件。诸如图片，字体等等，不过有个神奇的地方它可以根据你的需求将一些图片自动转成base64编码的，为你减轻很多的网络请求。

  url-loader npm install url-loader --save-dev

  配置config文件 (后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图片)

  {
  test: /\.(png|jpg)$/,
  loader: 'url?limit=40000'
  }

• 添加ES6的支持

  装各种loader npm install babel-loader babel-preset-es2015 --save-dev

  配置config文件

  ...
  {
  test: /\.jsx?$/,
  loader: 'babel',
  include: APP_PATH,
  query: {
    presets: ['es2015']
  }
  },
  ...