webpack打包工具
1.webpack与gulp的区别
gulp：gulp压缩的代码仍然是我们写的代码，只是局部变量名被替换了
一些语法做了转换而已，整体的内容没有发生任何变化。
webpack：webpack打包后的代码不只是我们写的代码，其中夹杂了很多webpack自身的模块处理代码。
webpack主要的适用场景是单页面复应用(SPA)。SPA主要是一个html和一些按需加载的js组成。
2.export（导出）和import（引入）
比如：
//confog.js
var config={
version:'1.0.0'
};
export{config}
或者
//config.js
export var config={
version:'1.0.0'
};
另外还可以导出一个函数
//add.js
export function add(a,b){
return a+b;
}
在其他地方import {add} from './add.js'
就可以直接调用add(1,1)
3.webpack的基础配置
3.1项目初始化
1.创建一个目录比如demo
2.npm init执行后会生成package.json的文件
3.2安装webpack和webpack-dev-server
1.npm install webpack --save-dev本地安装webpack
2.npm install webpack-dev-server --save-dev
3.npm install webpack-cli
也可以npm install webpack webpack-dev-server --save-dev
安装完成后package.json里面的数据为
{
"name": "pack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --config webpack.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.4.2",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"style-loader": "^1.1.3",
"webpack": "^4.41.5",
"webpack-dev-server": "^3.10.2"
},
"dependencies": {
"webpack-cli": "^3.3.10"
}
}
在script里面增加一个快速启动命令
"dev": "webpack-dev-server --open --config webpack.config.js"
--open会在执行命令时自动在浏览器打开页面，默认地址是127.0.0.1:8080,不过ip和端口都是可以配置的
比如
"dev": "webpack-dev-server --host 172.172.172.1 --port 8888 --open --config webpack.config.js"
这样访问地址就改为了172.172.172.1:8888.一般在局域网下，需要让其他同事访问时可以这样配置
否则就默认用127.0.0.1(localhost)就可以了
3.3新建一个webpack.config.js文件
var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
//----插件需要安装----
需要在终端执行命令
npm install --save-dev extract-text-webpack-plugin@next
var config = {
// 输入
entry: {
main: "./main.js" //配置的单入口，webpack会从main.js开始工作
},
// 输出
output: {
path: path.join(__dirname, "./dist"), //必填项，用来存放打包后文件的输出目录
publicPath: "/dist/", // 指定资源文件引用的目录
filename: "main.js" //指定输出文件名称
},
module: {
rules: [
{
test: /\.css$/, //匹配带.css的文件
use: ExtractTextPlugin.extract({
use: "css-loader",
fallback: "style-loader"
})
}
]
},
plugins: [new ExtractTextPlugin("main.css")]
};
module.exports = config;
// export default config
// 由于目前没有安装支持es6的插件,因此不能直接使用es6的语法,否则会报错
3.4在目录新建一个main.js文件
import './index.css';
引入样式
document.getElementById('app').innerHTML="hello like"
// 并没有刷新浏览器，页面就已经自动更新了，这就是webpack-dev-server的热更新功能
// 他通过建立一个websocket链接来实时响应代码的修改
3.5新建一个index.css文件夹
里面是css样式代码
#app{
background-color: brown;
}
3.6新建一个index.html文件夹
<!DOCTYPE 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>webpack</title>
<link rel="stylesheet" href="/dist/main.css">
</head>
<body>
<div id="app">like
</div>
<script src="/dist/main.js"></script>
</body>
</html>
3.7启动项目
npm run dev
此流程为简单的js和css的打包的一个大概流程
