webpack 教程

webpack 教程

疑难：
webpack-dev-server 不能通过ip访问？
增加 -host 0.0.0.0 配置项
"start": "webpack-dev-server --inline --hot --host 0.0.0.0",

安装：
npm i --save autoprefixer babel babel-loader css-loader json-loader postcss-loader react react-hot-loader style-loader stylus-loader url-loader webpack-dev-server yeticss

配置工具：（hjs-webpack——简化 webpack.config.js 配置）
var getConfig = require('hjs-webpack’);
module.exports = getConfig({
in: 'src/app.js', // 入口JS文件的位置
out: 'public', // 应用打包（build）之后将存放在哪个文件夹
clearBeforeBuild: true // 是否在每次打包之前将之前的打包文件删除
})

＊常见命令：
webpack --progress --colors
webpack —display-modules 构建时显示隐藏模块（第三方引入模块）
web pack —watch 监控（代码改变时自动打包构建）
webpack // 最基本的启动webpack的方法
webpack -w // 提供watch方法；实时进行打包更新
webpack -p // 对打包后的文件进行压缩
webpack -d // 提供source map，方便调式代码

＊常见错误处理
开启eslint 后报错
Parsing error: The keyword 'import' is reserved ／／https://github.com/yannickcr/eslint-plugin-react/issues/447

＊使用ES2015
新建 .babelrc 配置文件：｛“preset”：“es2015”｝
babel-loader
babel-core
babel-preset-es2015

＊css
npm install css-loader style-loader html-loader sass-loader node-sass --save-dev
loader: 'style!css!sass', // Or loaders: ['style', 'css', 'sass'],

＊按需加载 require.ensure()
会将包含内容打包为一个单独的文件： 默认名为1.xxx.js，可以通过第三个参数 “button” 添加更语义化名字 button.xxx.js
if (document.querySelectorAll('a').length) {
require.ensure([], () => {
const Button = require('./Components/Button').default;
const button = new Button('google.com');
button.render('a');
});
}
注：

1. require.ensure([], fn, ‘定义名称’)
2. 内部只能通过require()引入模块 eg: require(‘…’).default;
3. output.publicPath (定义从当前页面出发，到哪里可以找到按需加载到模块资源)

＊打包前清空文件夹 （第三方插件）
安装：npm install clean-webpack-plugin --save-dev
配置：plugins = plugins.concat([ new CleanPlugin('builds’) ])

＊自动化提取共同依赖 (自带插件)
new webpack.optimize.CommonsChunkPlugin({
name: 'main', // 将依赖移到我们的主文件中
children: true, // 再在所有的子文件中检查依赖文件
minChunks: 2, // 一个依赖重复几次会被提取出来
})

＊自动化合并小资源

＊生产环境

＊添加包的hash值和包的版本化

＊抽取 生成单独的css文件
npm install extract-text-webpack-plugin --save-dev

＊图片资源处理

• npm install url-loader file-loader --save-dev
• file-loader：返回一段指向资源的URL，允许你给文件加入版本的概念（默认）
• url-loader：以data:image/jpeg;base64的形式返回URL
  {
  test: /.(png|gif|jpe?g|svg)$/i,
  loader: 'url',
  query: {
  limit: 10000,//小于10k，采用行内 data:image/jpeg;base64 形势
  }
  }

＊开启 source－map

{
devtool : ‘eval-source-map’,   // config 里添加 devtool
}
….
// loader里添加 sourceMap 参数
{
    test: /\.scss$/,
    loaders: ['style', 'css?sourceMap', 'sass?sourceMap'],
    include: APP_PATH
  },

＊ 牛逼的热加载 需要server启动
npm install webpack-dev-server webpack-dev-middleware -g
配置：devServer: {
hot: true,
inline: true,
progress:true,
//其实很简单的，只要配置这个参数就可以了
proxy: {
'/api/': {//配置请求本地代理 http://localhost:5000/api/
target: 'http://localhost:5000',
secure: false
}
}
},

＊使用postcss （安装插件）
npm i -D postcss-loader
npm i -S pricss antoprefixer

配置： loader: ExtractPlugin.extract('style','css?sourceMap!postcss?sourceMap')
…
postcss: [require('precss'), require('autoprefixer')], // 引入插件

＊pre-loader和post-loader

1. preloaded实现加载一个文件目录为加载一个组件

import $ from 'jquery';
import Mustache from 'mustache';

直接require模块，WebPack会把依赖的文件都打包在一起，造成文件很臃肿。
异步加载的代码会被分片成一个个chunk，在需要该模块时再加载，即按需加载

同步加载过多代码会造成文件过大影响加载速度，
异步过多则文件太碎，造成过多的Http请求，同样影响加载速度

原则：首屏需要的同步加载，首屏过后才需要的则按需加载（异步）

按需加载的实现方式：
滚动加载
点击加载
延时加载
模糊加载

webpack 预打包dill，优化编译速度
DllPlugin & DllReferencePlugin

webpack.dill.config.js