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