webpack3的使用
webpack3的使用
webpack中的代码都是以模块化来进行编写
和gulp的区别
- gulp实现自动化压缩js,css,less代码等,
- webpack是把项目的js,css,less等文件打包成一个或多个,主要用于模块化方案
全局安装
npm install webpack@3.6.0 -g
局部安装
npm install webpack@3.6.0 --save-dev
//如果想要安装3系列最高版本,只需要后面加个3即可
npm install webpack@3 --save-dev
save-dev
是开发时依赖,项目打包后不需要继续使用的。
使用方法
运行如下命令,让webpack自动帮你打包main.js,它会自动帮你处理好各种依赖
//3.x用法
webpack ./src/main.js ./dist/bundle.js
//4.0用法
webpack ./src/main.js -o ./dist/bundle.js
手动配置package
npm init
package全局与本地命令
- 当直接在终端运行命令时在全局环境中查找
- 如果给package中script设置命令,则优先在本地查找
配置webpack.config.js
-
安装path,拼接当前目录的绝对路径
这里path不需要安装,是init时,node包中自带的模块
-
配置文件
const path = require('path')
module.exports = {
entry : './src/main.js',
output : {
//resolve拼接当前目录,绝对路径
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
}
}
注意:
- 直接在终端运行webpack是在全局环境中运行,而全局安装和项目中版本不同会报错,所以需要改成局部安装
- 要使用本地可以在package中配置script,然后npm run build即可
- 运行package中script的时候,会现在局部环境中寻找,找不到再去全局
loader
在开发中,我们不仅要处理js文件,还要将cs,typescript,图片,es6等转换成浏览器能够处理的文件
,只有webpack是做不到那么多的,所以需要安装扩展loader
使用方法:
- 通过npm安装需要使用的loader
- 在webpack.config.js中的module关键字下进行配置
css-loader使用注意
- 使用css-loader时,只是将css文件加载,还需要再安装style-loader进行渲染dom树
- module中的use规则,读取顺序是从右向左,所以应该先写style-loader,再写css-loader
url-loader的使用
-
当css引入图片时,需要添加并配置url-loader。
-
图片文件字节小于limit时,会对图片进行base64编码,css中url通过base64编码显示
-
如果图片大于limit时,则会提示安装file-loader。(limit默认=8kb)
-
为了防止文件命名重复,还可以在options中配置文件hash值
name:'img/[name].[hash:8].[ext]'
file-loader的使用
url-loader和file-loader的配置文件只能使用一个
开发时默认调用html路径下的图片文件。
如果图片和html不在同一个文件夹,可以在webpack.config.js的output中设置publicPath:'dist/'
。
就会默认引用该路径中的文件
和url-loader的区别:
- 打包时file-loader会把图片进行哈希值命名并一起打包进dist文件夹中
- url-loader只是作为base64字符串来使用,不需要存储单独文件
开发中打包图片我们想要使用原来的名字,可以在options中自定义文件的名字
options: {
//img文件夹中,原来文件名+8位哈希值+原格式extension的缩写
name:'img/[name].[hash:8].[ext]'
}
babel => es6语法处理
webpack打包的js文件中还存在es6语法,由于部分浏览器不支持es6,所以我们需要帮它转换成es5
-
安装方法:
npm i -D babel-loader @babel/core @babel/preset-env
-
i是install的缩写
-
-D是--save-deb的缩写
注意:这里版本要一致。webpack 3.x | babel-loader 8.x | babel 7.x
- 配置文件:由于转义时会把所有引用的js一起转义,而node_modules不需要转义,所以需要进行排除处理
{
test: /\.js$/,
//exclude 排除
//include 包含
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
配置vue
vue运行时需要依赖,所以安装时不用添加-dev
npm install vue --save
注意:
-
vue模块导出时使用的export default方法,所以导入不用加大括号{}。
import Vue from 'vue'
-
vue.runtime-only版本不可以有template。但vue实例默认就是template,所以打包时报错。
应该切换包含compiler的版本//在webpack.config中配置,和module同级 resolve:{ //alias:别名。切换vue版本 alias:{ //esm:esmodule 'vue$':'vue/dist/vue.esm.js' } }
-
引用组件时必须写扩展名,我们也可以设置,使不写扩展名也可引用
//在webpack.config中配置,和module同级 resolve:{ //alias:别名。切换vue版本 alias:{ //esm:esmodule 'vue$':'vue/dist/vue.esm.js' }, //extensions:扩展名 extensions:['.js','.css','vue'] }
我们引用vue时直接写
import app from 'App'
即可
vue文件封装处理
-
安装
vue-loader
和template-compiler
npm install vue-loader vue-template-compiler --save-dev -D
-
配置文件
Vue Loader 的配置和其它的 loader 不太一样。除了通过一条规则将 vue-loader 应用到所有扩展名为 .vue 的文件上之外,
请确保在你的 webpack 配置中添加 Vue Loader 的插件:
配置vue-loader官网
//引用插件,将下行代码添加至webpack.config头部
const { VueLoaderPlugin } = require('vue-loader');
//配置vue-loader
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// new一个插件,并记得引用!
new VueLoaderPlugin()
]
}
plugin插件
webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等等。
使用方法:
-
通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
-
在
webpack.config.js
中的plugins
中配置插件。//别忘记在头部引入 const webpack = require('webpack') //plugins。和module同级 plugins:[new webpack.BannerPlugin('这里是Vicer的版权')]
打包html的plugin
默认html文件在根目录中,而我们需要将index.html文件打包到dist文件夹中发布
所以需要使用HtmlWebpackPlugin插件
- 自动生成一个index.html文件(可以指定模板来生成)
- 将打包的js文件,自动通过script标签插入到body中
npm install html-webpack-plugin@3 --save-dev
配置文件:
//头部引入
var HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
new HtmlWebpackPlugin({template:'index.html'})
]
js压缩的Plugin
对打包的js文件进行压缩
这里我们使用1.1.1版本,与cl2保持一致
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
//或者
npm install uglifyjs-webpack-plugin@1 --save-dev
配置文件:
const uglifyJsPlugin = require('uglifyjs-webpack-plugin');
plugins: [
new uglifyJsPlugin()
]
搭建本地服务器
webpack提供了一个可选的本地开发服务器,这个本地服务器基于node.js搭建,内部使用express框架,
可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。
简而言之就是热更新
这里我们使用2.9.0版本,与webpack3.6.0相对应
npm install --save-dev webpack-dev-server@2.9.1
配置选项:
-
contentBase:为哪一个文件夹提供本地服务,默认是根文件夹,我们这里要填写./dist
-
port:端口号 //默认8080
-
inline:页面实时刷新
-
historyApiFallback:在SPA页面中,依赖HTML5的history模式
//和module同级 devServer:{ contentBase:'./dist', inline:true }
注意:
-
这里不需要引用。
-
通过本地环境命令来调用,也就是在package中设置script
-
命令中可以添加 --open,在自动更新时打开页面
"dev": "webpack-dev-server --open"
配置分离
在开发过程中,有的配置开发时用,有的配置生成时用,为了对应不同的时期我们可以做一个配置分离
-
在文件夹中把配置分离成三个文件,一个基础base,一个开发dev,一个生产prod。
-
安装webpack合并工具
npm install webpack-merge --save-dev
//无需配置webpack.config文件,使用时导入即可 -
导入webpack-merge和基础config文件,其他插件按需导入,然后进行合并
//这里以生产prod.config.js为例
const uglifyJsPlugin = require('uglifyjs-webpack-plugin');
//必备导入
const webpackMerge = require('webpack-merge');
const baseConfig = require('./base.config.js');
//合并配置并导出
module.exports = webpackMerge(baseConfig,{
plugins: [
//插件按需导入
new uglifyJsPlugin()
]
});
-
修改pageage文件
-
pageage文件中使用npm打包默认调用当前文件夹中webpack.config。
-
但我们要使用配置分离中的文件,所以script要手动引用相应的config文件
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config ./build/prod.config.js", "dev": "webpack-dev-server --open --config ./build/dev.config.js" }
-
-
修改基础配置文件
打包中发现直接打包到了配置文件夹,但我们希望其打包到父级目录
output : { //resolve拼接当前目录,在父级文件夹打包 path:path.resolve(__dirname,'../dist'), filename:'bundle.js' }
-
总结
使用npm run build 生产时打包文件
使用npm run dev 开发时打包文件
—— Here are lovecode3000 ~