webpack默认配置文件：bebpack.config.js
可以通过webpack --config指定配置文件
moudle.exports = {entry: './src/index.js', ————打包的入口文件
output: './dist/main.js', ————打包的输出
mode: 'prouction', ————环境
moudle:{
rules:[ ————loader配置
{test:/\.txt$/,use:'raw-loader'}
]
},
plugins:[
new HtmlwebpackPlugin({
template: './src/index.html'
})
]
}
1、安装nvm（nodejs的包管理器）
- 通过 curl 安装：curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
- 通过 wget 安装：wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
- 安装完成需要配置环境变量：source ~/.bash_profile
2、安装Node.js 和 npm
nvm install v10.15.3
nvm list （查看计算机上安装的所有的nodejs的版本）
1、新建空目录
在新建的目录中打开终端
执行：npm init -y
2、安装webpack和webpack-cli
npm i webpack webpack-cli --save-dev
webpack.config.js
- 'use strict'
-
- const path = require('path');
- module.exports = {
- entry: './src/index.js',
- output: {
- path: path.join(__dirname, 'dist'),
- filename: 'bundle.js'
- },
- mode: 'production'
- }
src/index.js
- import { helloWorld } from "./helloWorld";
- document.write(helloWorld());
src/helloWorld.js
- export function helloWorld(){
- return 'hello webpack!'
- }
代码编写完成后，在当前目录下运行：
./node_modules/.bin/webpack
在dist目录下新建index.html ，并在浏览器打开此文件
- html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Documenttitle>
- head>
- <body>
- <script src="./bundle.js">script>
- body>
-
- html>
配置快捷打包方式：修改package.json
- "scripts": {
- "test": "echo \"Error: no test specified\" && exit 1",
- "build": "webpack"
- },