☰
全局安装webpack
纵论 2020-07-09 10:24:31
npm i webpack -g
webpack4还要单独安装
npm i webpack-cli -g项目初始化
新建一个项目文件夹
mkdir web_vue
cd web_vue新建package.json
npm init -y安装webpack webpack-dev-server
npm i webpack webpack-dev-server --save-dev根目录下创建index.html
touch index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>在项目根目录下新建webpack.config.js
touch webpack.config.jswebpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {};新建src文件夹目录，并且在src下新建main.js，此时目录结构如下：
mkdir src
cd src
touch main.js
webpack的思想就是一切皆模块，官方推荐使用commonJS规范，这使得我们浏览器端也可以使用commonJS的模块化写法 :module.exports = {}
src目录下新建一个utils.js
module.exports = function say() {
console.log('hello world');
}main.js
var say = require('./utils');
say();webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/main.js', // 项目的入口文件，webpack会从main.js开始，把所有依赖的js都加载打包
output: {
path: path.resolve(__dirname, './dist'), // 项目的打包文件路径
publicPath: '/dist/', // 通过devServer访问路径
filename: 'build.js' // 打包后的文件名
},
devServer: {
historyApiFallback: true, //historyApiFallback设置为true那么所有的路径都执行index.html。
overlay: true // 将错误显示在html之上
}
};package.json
"dev": "webpack-dev-server --open --hot",
"build": "webpack --progress --hide-modules"
注意：webpack-dev-server会自动启动一个静态资源web服务器 --hot参数表示启动热更新
修改index.html，引入打包后的文件
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Document
<script src="./dist/build.js">
webpack默认不支持转码es6，但是inport export单独支持，所以我们可以改写
utils.js
export default function say(){
console.log('hello world');
}
main.js
import say from './utils';
say();