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中，而"."代表的當前路徑是入口腳本所在路徑
