一涌攻、新建文件目錄
1、/src文件
2、npm init -y（初始化packjson.json文件）
3、npm i --save-dev webpack 安裝webpack
二查乒、安裝webpack依賴包
1、npm i webpack -g 保存webpack到全局npm
2郁竟、npm i webpack-cli -g保存webpack-cli到全局
三玛迄、新建/配置webpack.config.js文件
const path = require('path'); //nodejs內(nèi)置模塊
module.exports = {
/**
* 入口
*/
entry: './src/index.js',
/**
* 出口
*/
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
}
四、package.json配置運行打包
1枪孩、安裝
npm i -S webpack-dev-server
2憔晒、配置
"build": ".\\node_modules\\.bin\\webpack --mode development",
"serve": ".\\node_modules\\.bin\\webpack-dev-server"
3藻肄、執(zhí)行
打包：npm run build
運行：npm run serve
五蔑舞、運行html項目需要配置
1、babel-loader
用來處理ES6語法嘹屯，將其編譯為瀏覽器可以執(zhí)行的js語法攻询。
- 安裝
webpack 3.x | babel-loader 8.x | babel 7.x
npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack
- 配置
在 webpack 配置對象中，需要添加 babel-loader 到 module 的 loaders 列表中
webpack.config.js 文件配置（規(guī)則）
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
2州弟、HtmlWebpackPlugin安裝（簡化了HTML文件的創(chuàng)建钧栖，為webpack包提供服務(wù)）
安裝
npm install --save-dev html-webpack-plugin配置webpack.config.js 文件配置（規(guī)則）
plugins: [new HtmlWebpackPlugin({
filename: 'index.html',
template: __dirname + "/public/index.html"
})]
- 修改后每次打包才能運行
六、loader安裝
loader：文件預(yù)處理器婆翔，通俗點就是webpack在處理靜態(tài)文件的時候拯杠，需要使用 loader 來加載各種文件，比如： html文件需要使用html-loader ,css 需要使用css-loader 啃奴、 style-loader 等等潭陪。
1、css
安裝
npm install --save-dev css-loader
npm install style-loader --save-dev配置webpack.config.js 文件配置（規(guī)則）
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
其他loader同理
七、本地服務(wù)-->開發(fā)中 Server(devServer)
瀏覽器解析為location：8080（實時緩存執(zhí)行）
安裝
npm install webpack-dev-server --save-dev配置webpack.config.js
/**
* 本地服務(wù)
*/
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
port: 8080, //端口號
historyApiFallback: true, //不跳轉(zhuǎn)
inline: true //實時刷新
},
八依溯、使用typescript
TypeScript 是 JavaScript 的超集老厌，為其增加了類型系統(tǒng)，可以編譯為普通的 JavaScript 代碼黎炉。
安裝
npm install --save-dev typescript ts-loader-
新建文件
tsconfig.json
配置 tsconfig.json文件
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true
}
}
- 配置webpack.config.js
將 webpack 的入口起點指定為 ./index.ts枝秤，然后通過 ts-loader 加載所有的 .ts 和 .tsx 文件，并且在當(dāng)前目錄輸出一個 bundle.js 文件慷嗜。
entry: './src/index.ts',
resolve: {
extensions: [ '.tsx', '.ts', '.js' ]
},
