一,webpack安装
两种安装方式
1)全局安装
命令:npm install --global webpck
可在全局环境下使用webpack
注意:
不推荐,全局安装会锁定版本,如果在使用不同 webpack版本的项目中,可能导致构建失败
2)本地安装
当前最新版本 4.16.1
以下命令可以在本地安装最新的稳定版本,或者指定版本
npm install --save-dev webpack
npm install --save-dev webpack@<version>
如果使用webpack4.0+版本,需要安装CLI
npm install --save-dev webpack-cli
对于大多数项目,推荐本地安装,当引入其他的依赖时,更容易分别升级项目
当进行了本地安装,我们可以在node_module/.bin/webpack文件夹中访问他的bin版本,本地安装就是在当前项目中进行构建,其他项目不能使用
二,打包教学
1,创建项目目录,初始化npm,本地安装webpack,安装webpack-cli,命令如下:
1, mkdir webpack-demo && cd webpack-demo
2,npm init -y
会出现:
Wrote to C:\xampp\htdocs\zxl\H5高级--Vue实战开发\dayF-webpack\课堂案例\webapack-demo\package.json:
{
"name": "webapack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
3,npm install webpack webpack-cli --save-dev
目录结构:
webpack-demo
|-package.json
|-node-module
+|-index.html
+|-/src
+|-index.js
2,打一个bundle包
webpack-demo
|-package.json
|-node-module
+|-dist
+|-index.html
-|-index.html
+|-/src
+|-index.js
因为index.js 依赖了lodash,所以我们需要本地安装lodash
npm install --save lodash
安装工具库:jquery
npm install jquery --save
注意:
mac出现权限问题,前边加sudo
3.使用配置文件创建bundle
webpack 4以后的版本,不需要配置文件即可打包,很多项目比较复杂的设置可以在配置文件中配置,相比在终端输入大量命令更加高效,所以我们可以创建一个能够取代以上使用cli选项方式的配置文件:
目录结构:
webpack-demo
|-package.json
|node-modules
+ |-webpack.config.js
|-dist
|-index.html
|-/src
|-index.js
配置文件中的内容:
const path = require('path');
module.exports = {
//将'./src/index.js'打包到dist文件夹中的bundle.js
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
终端执行配置文件:
npx webpack --config webpack.config.js
4. npm 脚本 (NPM script)
考虑到使用webpack-cli运行本地webpack不方便,我们可以设置一个快捷方式
在package.json中添加npm脚本
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack --config webpack.config.js",
"build-d":"webpack"
},
此时可以使用npm run build 或者npm run build-d 替代 npx webpack --config webpack.config.js
5,打包css文件
根目录创建css文件夹,创建myStyle.css
如果要将样式表打包到bundle.js中,需要webpack对样式表支持
命令如下:
npm install css-loader style-loader --save -dev
mac权限问题:sudo
css-loader:遍历样式,如果发现有import导入css文件,就会将css文件引入进来
style-loader:将样式通过style直接插入页面头部
在index.js中加入:require('!style-loader!css-loader!../css/myStyle.css');
手动配置打包依赖,使用import引入
index.js 加入:
import './sty.css';
webpack.config.js 修改如下:
.....,
module:{
rules:[
{
test:/\.css$/,
use:[
'style-loader',
'css-loader'
]
}
]
}
6,打包图片
使用file-loader 可以轻松的将图片加入到js和css中
命令:
npm install --save-dev file-loader
在webpack.config.js中的rules数组中加入新的对象:
,
{
test:/\.(png|svg|jpg|gif)$/,
use:[
'file-loader'
]
}
可以在css中使用该图片,在index.js中使用该图片需要先引入:
import dog from '555.jpg';
下边使用dog就是图片的路径
7,加载字体
使用file-loader
在webpack.config.js中的rules数组中加入新的对象:
,
{
test:/\.(woff|woff2|eot|ttf|otf)$/,
use:[
'file-loader'
]
}
8,加载数据文件
json,xml,csv,tsv.....
json文件是默认支持的,不需要创建:
import data from './data.json'
安装csv-loader和xml-loader:
npm install --save-dev csv-loader xml-loader
在webpack.config.js中的rules数组中加入新的对象:
,
{
test:/\.(csv|tsv)$/,
use:[
'csv-loader'
]
},{
test:/\.xml$/,
use:[
'xml-loader'
]
}
在index.js中:
import xml from './data.xml';
9,模块的依赖关系
打包文件载入依赖文件:
require()
eg:
var $=require('jquery');
require('!style-loader!css-loader!./css.css');
var json=require('./data.json');
创建依赖模块:
创建一个data.js
var json={
str:'我是data文件中的数据'
};
module.exports=json;
在index.js文件中引入该模块:
var json=require('./data.js');
创建一个fun.js,功能函数:
function fun(name) {
alert('我是'+name+'我来自fun');
}
module.exports=fun;