Webpack

Webpack的安装

• npm install webpack -g 安装全局webpack
• npm install webpack --save-dev 安装项目webpack依赖
• webpack -v 查看webpack版本号

npm的加载原理， npm会优先使用项目本地的npm包，如果找不到的时候才去全局的npm包里找。

Webpack.config.js

• entry js的入口文件
• externals 外部依赖的声明
• output 目标文件
• resolve 配置别名
• module 各种文件，各种loader
• plugins 插件

Webpack Loaders

• html html-webpack-plugin / html-loader
• js babel-loader + babel-preset-es2015
• css style-loader + css-loader
• image + font url-loader

Webpack常用命令

• webpack 用于以不压缩的行式打包，常用于调试代码
• webpack -p 用于线上发布时的打包，会把所有的文件做最小化压缩
• webpack --watch 监听文件的改变自动编译，一般用于开发过程
• webpack --config webpack.config.js 改变默认的配置文件设置

Webpack-dev-server

• 作用：前端开发服务器

• 特色：可以在文件改变时，自动刷新浏览器

• 安装：

  npm install webpack-dev-server --save-dev
  

• 配置：

  webpack-dev-server/client?http://loaclhost:8088
  

• 使用：

  webpack-dev-server --port 8088 --inline
  

• 1.15.0版本自动刷新：

  package.json里添加
  "scripts": {
      "dev": "webpack-dev-server --inline --content-base",
    }
  

Webpack对脚本和样式的处理

对脚本的处理

• JS用什么loader加载？
  使用webpack自带的JS加载器

• 官方文档上的例子中entry只有一个js， 我们有多个怎么办？

  entry: {
      'index':['./src/page/index/index.js'],
      'login':['./src/page/login/index.js']
  }
  

• output里要分文件夹存放目标文件，怎么设置？

  output: {
      path: path.resolve(__dirname, './dist'),
      filename: 'js/[name].js' 
  }
  

• jquery引入方法？
  在index.html文件里以script标签引入jquery

  
  //若你以本地打开测试jquery，src里的http:是必须写上的
  

  模块化的方式：（需在config.js配置文件里加入externals字段）

  externals: {
    'jquery': 'window.jQuery'
  }
  //再在js里引入
  let $ = require('jquery')
  

• 我想提出公共模块，怎么处理？

  let webpack = require('webpack')
  entry: {
    'common': ['./src/page/common/index.js']
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: 'common',
        filename: 'js/base.js'
    })
   ]
  

对样式的处理

• 样式使用怎样的loader?

  • 安装loader

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

  • config.js配置文件里加入module字段

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

• webpack打包的css怎么独立成单独的文件？

  • 安装插件extract-text-webpack-plugin

    npm install [email protected] --save-dev
    

  • 配置文件添加对应配置
    首先require一下

    let ExtractTextPlugin = require("extract-text-webpack-plugin");
    

  • plugins里面添加

    new ExtractTextPlugin("css/[name].css"),
    

  • module配置

    module: {
       loaders: [
          { test: /\.css$/, loader: ExtractTextPlugin.extract("css-loader") }
       ]
    }
    

对html模板的处理

• 安装插件：

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

• 引入插件：

  var HtmlWebpackPlugin = require('html-webpack-plugin');
  

• 封装获取html-webpack-plugin参数：

  let getHtmlConfig = function (name) {
    return {
        template: './src/view/' + name + '.html',
        filename: 'view/' + name + '.html',
        inject: true,
        hash: true,
        chunks: ['common', name]
    }
  }
  

• 在plugins里添加并上传name：

  new HtmlWebpackPlugin(getHtmlConfig('index'))
  

对html文件的公共文件处理

• 安装插件：

  npm install html-loader --save-dev
  

• 新建一个html文件做为公共head文件把head部分放入这个文件里

• 在其他html文件里把head部分删除 然后引入公共head文件

  <%= require('html-loader!./layout/html-head.html') %>
  

• 命令行运行webpack

Webpack 对icon、font和图片的处理

• 安装插件：

  npm install url-loader --save-dev
  

• 在config.js配置文件里的loaders添加

  loaders: [
    { test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=100&name=resource/[name].[ext]' }
  ]
  

• 再在对应的文件里引入

Webpack-dev-server

• 安装：

  npm install webpack-dev-server --save-dev
  

• 全局安装：

  npm install webpack-dev-server -g
  

• 再在配置文件output里添加：

  output: {
      publicPath: '/dist' //  访问文件时用的路径
  }
  

• 运行webpack-dev-server

若觉得运行这个命令太长可以在package.json 里script里设置快捷

"scripts": {
    "dev": "webpack-dev-server",
    "dist":"webpack -p"
}

再在命令行运行 npm run dev | npm run dist