Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分
析,然后将这些模块按照指定的规则生成对应的静态资源。Webpack 可以将多
种静态资源 js、css、less (扩展css样式)转换成一个静态文件,减少了页面的请求。
1.先安装webpack
idea中执行:
npm install webpack
npm install webpack-cli
这个很大需要下载很久
2.测试步骤
2.1:建立两个js文件a.js/b.js
a.js
export default {
sum(a,b){
return a+b;
}
}
b.js
import util from './a.js'
console.log(util.sum(1,5));
2.2:在命令栏输入命令
webpack b.js -o dist/bundle.js
2.3:新建测试的html文件,导入新产生bundle.js文件
<script src="dist/bundle.js"></script>
2.1:建立两个js文件a.js/b.js
a.js
var a = "a模块";
var b = require('./b.js');
console.log(b);
b.js
define(function () {
var b = "b模块";
return b;
});
2.2:在命令栏输入命令
webpack a.js -o dist/bundle.js
2.3:新建测试的html文件,导入新产生bundle.js文件
<script src="dist/bundle.js"></script>
为什么使用js打包配置
上面我们每次在打包的时候,都要输入 webpack src/a.js -o dist/bundle.js 这个命令,比较麻烦,所以我们可以按照下面的方式,新建一个js文件,到时候打包的时候,只需要运行webpack 命令就可以进行打包
新建配置文件: webpack.config.js ,该文件与项目根处于同级目录
var path = require("path");
module.exports = {
entry: './a.js',//入口,就是需要打包的js文件
output: {
path: path.resolve(__dirname, './dist'),//打包到什么位置
filename: 'bundle.js'//打包出来的文件的名字
}
}
当我们需要打包的时候,我们就在命令窗口输入webpack命令就可以执行打包命令
webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。
loader 通过在 require() 语句中使用 loadername! 前缀来激活,或者通过 webpack 配置中的正则表达式来自动应用 -
vue-loader 转换vue组件 *.vue
css-loader 加载css文件
babel-loader 加载 ES2015+ 代码,然后使用 Babel 转译为 ES5
简单实用,打包css文件
1.安装loader
npm install style-loader --save-dev
npm install css-loader --save-de
2.准备css文件
css文件: css/index.css:
span{
background-color: red;
}
3.在另一个准备的js文件中引入css文件
require('../css/index.css')
4.在webpack.config.js文件引入下面代码
var path = require("path");
module.exports = {
entry: './web/js/a.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/, //匹配文件规则
use: ['style-loader', 'css-loader'] //匹配后使用什么加载器进行模块加载
// webpack use的配置,是从右到左进行加载的
},
]
}
}
5.准备html页面测试
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript" src="Cssdist/bundle.js">script>
head>
<body>
<span>这条语句用了打包后的Css样式span>
body>
html>
在前端加个服务器
简单实用步骤
1)安装插件:npm install webpack-dev-server --save-dev
2)添加启动脚本
在package.json中配置script
"scripts": {
"dev": "webpack-dev-server --inline --progress --config ./webpack.config.js", },
–inline:自动刷新
–hot:热加载
–port:指定端口
–open:自动在默认浏览器打开
–host:可以指定服务器的 ip,不指定则为127.0.0.1
然后就可以访问http:localhost:8080/test.html了就是html文件的所在位置