一般情况下,我们不会自己写这么多webpack配置,而是用脚手架完成,本文没有脚手架,只是单纯的学习webpack配置过程webpack 中文文档 | webpack 中文网
webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。
将所有资源打包成浏览器能够识别的代码和文件
- webpack能够将ES6转化成ES5供浏览器识别
- webpack能提供AMD\CMD\commonJS\ES6等多种模块话开发方式,并在最后转化为浏览器能识别的代码
- webpack可以帮我们处理好模块之间各种的复杂关系
- webpack可以将各种资源进行打包合并成一个或多个包(Bundle)
- 打包过程中还会对资源进行整理,如scss转为css, typescript转为JS等
一. 安装
webpack依赖于node环境
node环境下直接npm安装即可 (考虑到国内恶劣的网络环境,最好是cnpm安装)
1.全局安装
cnpm install --global webpack-cli 4.0以后的版本要安装CLI3
3.6.0版本(CLI2)
cnpm install webpack@3.6.0 -g
安装完成后我们尝试使用 webpack -v 看版本号,能看到代表安装成功
2.工程安装
cnpm install webpack@3.6.0 --save-dev
二. webpack入口出口配置
1.基本命令 //只是体验一下
在终端中输入:
webpack ./src/main.js ./dist/bundle.js 意思是:以main.js为入口 打包成bundle.js
完成后的bundle.js就是浏览器可以识别的JS文件了
我们可以在html里引入bundle.js试一试
但是,实际上我们不会这么做,因为这个命令很长,而且使用的是全局webpack,而非工程中的webpack
2. 配置webpack.config.js
配置webpack.config.js是为了是我们的打包过程更爽快
- 配置之前,我们先初始化一下工程环境
npm init --yes
之后运行
cnpm install webpack@3.6.0 --save-dev 安装本次开发时用的包3.6.0
2.创建webpack.config.js文件 配置打包入口和输出位置
const path=require('path') //JS路径处理模块
module.exports ={
entry:'./src/main.js', //打包的入口
output:{
path:path.resolve(__dirname,'dist'), //目标文件夹
filename:'bundle.js' //目标文件名
}
}
这样就设置好了打包的方法 此时 我们用 webpack 就可以直接将main.js打包成bundle.js
3. 打开package.json文件
在图示位置添加命令绑定 :"bulid":"webpack"
这样配置好了之后 我们可以用 npm run bulid 来打包了
npm run bulid
不同于第二步的方法 ,npm run 命令会优先寻找本地本工程的包运行
三. loader打包CSS文件配置
工程中,我们还需要加载css 图片 scss less转css jsp vue文件转js 等工作
对webpack本身来说,这些转化还不支持
怎么办呢? 给webpack加装不同的loader就可以了
怎么使用loader?官网的介绍非常的详尽!
loaders | webpack 中文网1.加装loader步骤:
- npm 安装loader
- 在webpack.config.js中的modules关键字下进行配置
2. loader打包CSS文件配置
(1)npm安装css-loader
//此loader作用是: 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码
cnpm install --save-dev css-loader
(2) npm安装style-loader //此loader的作用是:将模块的导出作为样式添加到 DOM 中
cnpm install style-loader --save-dev
(3) 配置webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/, //将css和loader建立联系
use: [ 'style-loader', 'css-loader' ]
//webpack读取loader顺序是从右向左读,所以后续步骤的loader在前面
}
]
}
}
(4) 不要忘记在入口文件里面引用它
import css from '../css/nomal.css';
四. loader打包less文件配置
(1) 安装less 和 less-loader
cnpm install --save-dev less-loader less
(2)配置webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}]
}
};
(3).不要忘记在入口文件里面引入
import less from '../css/special.less';
五. loader打包图片配置
有时,我们会用到webpack打包的文件里有图片的情况. 比如我们的CSS文件中添加了一个元素的背景图片 background: url('../img/huowa.jpg.jpg');
图片是url引入的所以我们需要安装url-loader
(1)安装url-loader
cnpm install --save-dev url-loader
(2)安装file-loader
cnpm install --save-dev file-loader
(3)配置webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192 //当加载的图片小于limit时会将图片转化为base64格式
//当图片大于此限制时,使用file-loader处理
}
}
]
}
]
}
}
(4) 再配置webpack.config.js //路径问题
经过前三步,我们已经能够加载base64的图片,但是当加载大于限制的图片时,出现问题
我们查看dist文件夹,发现其实图片已经打包过来了
我们审查元素发现是文件路径配置错误:
这时,我们需要再去配置webpack.config.js
在其输出配置中加上:
publicPath:'dist/',
这样文件就可以正常访问了.
但是注意,此问题的根源是:我们的index.html与资源路径不在同一个文件夹下,当我们最终部署时,肯定会把index.html放入dist中部署,到时就不存在这个问题了!
所以,最后部署时,要删除这个配置
(5) 再配置webpack.config.js //图片目录和命名方式
我们只需要在图片打包的配置添加相关属性设置即可
name:'img/[name].[hash:8].[ext]'
此时,文件输出正常而合理了
六. loader处理ES6
为了解决浏览器解析问题,webpack打包的最终代码最好是没有ES6语法的.
这需要我们使用babel-loader处理转化过程
(1) 安装
这里我们选择了版本,并指定了解析ES2015
cnpm install --save-dev babel-loader@7 babel-core babel-preset-es2015
如果按照官网的配置:
npm install babel-loader babel-core babel-preset-env webpack
需要额外配置,请看官网
(2) 配置webpack.config.js
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
]
}
七. 如何在webpack中配置Vue
1.npm安装vue
cnpm install vue --save
2.引用vue
import Vue from 'vue'
vue已经装好了包,可以任意js里随意引用了
3. 配置webpack.config.js //修改vue使用版本
关于vue的两个版本
runtime-only: 代码中不可有任何的template
runtime-compiler: 可以有template,因为有compiler进行template编译
我们需要用到模板,如何配置成runtime-compiler呢?
在webpack.config.js里定义属性resolve
resolve:{
alias:{
'vue$':'vue/dist/vue.esm.js'
}
}
八. Vue的终极方案 (无脚手架辅助)
1.先配置vue-loader和vue-template-compiler
cnpm install vue-loader vue-template-compiler --save-dev
2.修改vue-loader版本
3.重新npm install
4.配置webpack.config.js
{
test: /\.vue$/,
use: ['vue-loader']
},
5.在index.html中只保留app入口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script src="./dist/bundle.js"></script>
</body>
</html>
6.在main.js中写: 根组件
import Vue from 'vue'
import App from '../vue/App.vue'
new Vue({
el: '#app',
template: '<App/>',
components: {
App
}
})
7.创建新的App.vue文件,在里面写内容
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>
8.如何引用子组件?
在.vue的script标签中 import Cpn form './Cpn.vue'
然后将 Cpn 注册到父组件的components属性下就可以了
九. webpack plugin //插件
插件用于对现有框架进行扩展
plugin和loader区别:
- loader只要用于转换某些类型的模块,是一个加载器,转换器
- plugin是插件,对webpack本身功能进行扩展
1.使用plugin的过程
有些插件是webpack自带的 ,直接在webpack.config.js中导入即可使用
有些是需要自己安装的
①. npm安装
②.
2.版权声明插件
给我的打包的bundle.js加一个版权声明
在webpack.config.js 中导入webpack
const webpack=require('webpack') //导入webpack
然后可以在export.module中添加 plugins属性,并使用
plugins:[
new webpack.BannerPlugin('最终版权归熊爸所有')
]
3. 打包html的插件
我们知道真实发布的项目只有dist文件夹中的内容,而我们的index.html没有在其中,这时就需要我们的插件把index.html打包到dist文件夹中了
①npm安装html-webpack-plugin
cnpm install html-webpack-plugin --save-dev
②. 设置webpack.config.js 导入刚刚装好的插件
const htmlWebpackPlugin =require('html-webpack-plugin')
③. 设置webpack.config.js 在plugins属性中添加:
plugins:[
new htmlWebpackPlugin({
template:'index.html'
})
]
④,如果之前设置输出配置中加上:
publicPath:'dist/',
那请把它删除
⑤. 为了方便vue使用,我们要在生成的html中添加一的vue入口标签,我们在new一个 htmlWebpackPlugin时,传入了我们的日常使用的index.html,
生成dist/index.html代码时,插件会自动插入一个绑定到bundle.js的<script>,所以我们无需在模板中插入<script>了
模板:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
生成的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="bundle.js"></script></body>
</html>
4. js压缩插件 //将代码精简成min版本
① npm安装uglifyjs-webpack-plugin@1.1.1 为了和CLI2保持一致
cnpm install uglifyjs-webpack-plugin@1.1.1 --save-dev
②. 设置webpack.config.js 导入刚刚装好的插件
const UglifyjsWebpackPlugin =require('uglifyjs-webpack-plugin')
③. 设置webpack.config.js 在plugins属性中添加:
plugins:[
new UglifyjsWebpackPlugin()
]
再打包时发现,我们的生成代码果然很丑了
十.搭建本地服务器方便调试
启动本地服务器,一来方便调试,二来不用频繁打包
1.npm安装webpack-dev-server
cnpm install --save-dev webpack-dev-server@2.9.1
2. 设置webpack.config.js
在 module.exports 中添加如下属性
devServer:{
contentBase:'./dist',
inline:true,
port:8080
}
3.设置npm run启动服务器
在 package.json 中的scripts属性添加如下属性
"dev":"webpack-dev-server --open"
4. npm方式运行服务器
npm run dev
5.浏览器访问
http://localhost:8080/ 或者 127.0.0.1:8080即可访问
6.当完成项目时,只需运行一次打包
npm run builder
扫一扫
2570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
