webpack官方文档...
一、新建文件目录
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内置模块
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、执行
打包：npm run build
运行：npm run serve
五、运行html项目需要配置
1、babel-loader
用来处理ES6语法，将其编译为浏览器可以执行的js语法。
- 安装
webpack 3.x | babel-loader 8.x | babel 7.x
npm install [email protected] @babel/core @babel/preset-env webpack
- 配置
在 webpack 配置对象中，需要添加 babel-loader 到 module 的 loaders 列表中
webpack.config.js 文件配置（规则）
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
2、HtmlWebpackPlugin安装（简化了HTML文件的创建，为webpack包提供服务）
安装
npm install --save-dev html-webpack-plugin配置webpack.config.js 文件配置（规则）
plugins: [new HtmlWebpackPlugin({
filename: 'index.html',
template: __dirname + "/public/index.html"
})]
- 修改后每次打包才能运行
六、loader安装
loader：文件预处理器，通俗点就是webpack在处理静态文件的时候，需要使用 loader 来加载各种文件，比如： html文件需要使用html-loader ,css 需要使用css-loader 、 style-loader 等等。
loader 文档...
1、css
安装
npm install --save-dev css-loader
npm install style-loader --save-dev配置webpack.config.js 文件配置（规则）
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
其他loader同理
七、本地服务-->开发中 Server(devServer)
浏览器解析为location：8080（实时缓存执行）
安装
npm install webpack-dev-server --save-dev配置webpack.config.js
/**
* 本地服务
*/
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
port: 8080, //端口号
historyApiFallback: true, //不跳转
inline: true //实时刷新
},
八、使用typescript
TypeScript 是 JavaScript 的超集，为其增加了类型系统，可以编译为普通的 JavaScript 代码。
webpack中typescript使用...
安装
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 文件，并且在当前目录输出一个 bundle.js 文件。
entry: './src/index.ts',
resolve: {
extensions: [ '.tsx', '.ts', '.js' ]
},