webpack入门纪要

webpack等打包工具出现的原因

随着前端技术的发展壮大，前端逐渐能处理越来越复杂的逻辑与运算，代码量也逐步增加，为了开发结构的清晰，模块化出现了，将具有较强关联的代码组合到单独的文件中，方便编写和维护。
随之而来的问题就是对传输的影响，是文件逐个按需传输，还是整体打包一次性传输，或者有更好的其他解决方案？前两者均有利弊，不能太令人满意，智能打包工具便应运而生。webpack的强大在于，不仅其本身可以解析js，而其loader功能可以将其他的静态资源转换为js。

环境配置

以react-webpack为例说明两者结合后的基本使用方法

• 新建目录，初始化npm环境
  安装node；
  安装cnpm，可安装nrm，方便源的切换；
  初始化项目npm依赖配置，npm init -y，以默认选项生成
  package.json

npm安装中--save-dev和--save选项的区别？
--save-dev，包加入package.json的dependencies中，作为开发时需要的依赖
--save，包加入devDpendenies中，作为发布时需要的依赖

• 安装webpack相关依赖
  安装webpack
  sudo cnpm i webpack webpack-dev-server —save-dev

• 配置webpack-dev-server
  在package.json中的scripts字段添加如下项：
  "dev": "webpack-dev-server --devtool eval --colors --progress"
  通过浏览器http://localhost:8080可访问到页面

• webpack插件选装
  安装open-browser-webpack-plugin，使webpack运行时自动打开浏览器新标签

npm i open-browser-webpack-plugin --save-dev
// webpack.config.js中添加配置
var OpenBrowserPlugin = require('open-browser-webpack-plugin')
plugins: [
  new OpenBrowserPlugin({
    url: 'http://localhost:8080'
   })
]

安装html-webpack-plugin，帮助自动生成index.html

npm i html-webpack-plugin --save-dev`
var HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
  new HtmlWebpackPlugin()
]

webpack-dev-server热替换

//添加插件
plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
//增加入口
entry: [
    'webpack/hot/dev-server',
    'webpack-dev-server/client?http://localhost:8080',
    './index.js'
  ],
/*
在webpack.config.js中设置publicPath为/assets/
将index.html中的入口脚本src设为'/assets/bundle.js'
启动webpack-dev-server
*/

• jsx语法 ，babel-core
  安装依赖包
  npm i babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev
  新建.babelrc文件，并配置

//配置.babelrc
{
  ‘presets’: [
    ‘es2015’, //es2015转码
    ‘react’//react转码
  ]
}

• 安装react
  npm i react react-dom —save-dev

• 安装eslint
  npm i babel-eslint --save-dev
  配置eslint airbnb config

npm i eslint eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react eslint-config-airbnb --save-dev
// 编辑webpack.config.js
preLoaders: [
  {
    test: /\.jsx?$/,
    loaders: ['eslint-loader'],
    include: path.join(__dirname, 'src'),
    exclude: path.join(__dirname, 'src/app/container')
  }
],
eslint: {
  configFile: './.eslintrc',
  emitWarning: true
}
// 新建.eslintrc
{
  "extends": "airbnb"
}

• 遇到的问题

1. 使用webpack --display-error-details选项开启报错信息详情
2. react的jsx安装并配置了babel-loaer的情况下，依然报错，Module build failed: SyntaxError:找不到模块
   import App from ‘App.js’
   改为
   import App from ‘./App.js’
   因为import默认路径是node_modules中，而"."代表的当前路径是入口脚本所在路径