At its core,webpack is a static module bundler for modern javaScript applications
模块打包
工具模块化开发
,必须借助于其他工具
,让我们进行模块化开发,并且在模块化开发完成了项目后,需要处理模块间的各种依赖
,并且进行整合打包
。依赖关系
,并且还可以将CSS、图片、json文件等等
在webpack当作模块来使用合并
成一个或多个包
,还可以对资源进行处理,比如:压缩图片、将scss转成css、将ES6语法转成ES5语法等打包整合
,grun/gulp更适合,更适合前端流程自动化,对于模块化并非它的核心。模块化开发
,同时也会对资源进行打包整合
node.js
,Node.js自带了软件包管理器(npm)。-- 由于NPM下载包需要越墙下载,不使用国内的源会很慢,这里建议换好国内的源再使用Npmnpm install webpack -g
打包后
的文件项目入口的文件
,模块化入口index.html
引入js
文件,这种方法会很麻烦且因为引入顺序的关系
,一些代码无法识别。main.js
打包成一个文件,这样的话引入时就会方便很多。指令
webpack src/main.js dist/bundle.js
我们通常情况下不会直接使用webpack原生
的打包指令,会显得麻烦,且直接指定位置会很不方便。
webpack.config.js
文件来写上需要打包的文件
和打包好的文件
-即 入口和出口//因为path需要绝对路径,所以我们需要这个包来动态获取路径
//在导入这个包前需要 npm init,init完成后会出现package.json
const path = require(‘path‘)
module.exports = {
//入口:可以是字符串、数组、对象,这里入口只有一个,所以写作字符串
entry: ‘./src/main.js‘,
output: {
//出口:通常是一个对象,里面有两个重要属性:path和filename
path: path.resolve(__dirname, ‘dist‘),
filename: ‘bundle.js‘
},
}
大部分项目都会有一个本地安装的webpack
来进行运行项目,那么怎样使用本地的webpack而不是全局的webpack呢?
npm install webpack@版本号 --save-dev
package.json
中的scripts
来修改build
的运行命令:"webpack"
npm run build
就可以执行本地的webpackwebpack loader
的使用
css、图片、ES6转ES5等
打包文件是不支持,所以我们需要Lader
来进行配置
webpack官网
对应Loader
使用方法,进行配置npm
来下载对应loader
webpack.config.js
的modules
关键字来进行配置modules
中对loader
的加载是从右往左
加载,所以对应需要先加载
的要放右边。入口
处把对应的文件引入即可。loader
使用注意:
loader
的使用中,有两种方式:
url-loader
:一种是够小
(webpack.config.js中对应options中limit
大小以下)的图片直接以base64
的方式发送到网页上。file-loader
:大于url-loader
我们就需要直接将图片打包上传
,但在打包中图片会返回原有的路径经行储存
output下的publicPath:‘指定一个文件夹‘
option下对name:‘img/指定文件名‘
放在该位置下并且重命名
依然使用hash
,但我们只保留8位webpack配置Vue
Vue.js
必须引入Vue.js。npm install vue --save
runtime-only 的Vue
这个版本不能运行template
.所以修改webpack.config.js 中
resolve: {
// alias: 别名
alias: {
‘vue$‘: ‘vue/dist/vue.esm.js‘
}
}
loader
使webpack可以打包Vue文件
npm install vue-loader vue-template-compiler --save-dev
//并配置
{
test: /\.vue$/,
use: [‘vue-loader‘]
}
webpack配置plugin
plugin
主要是对现有架构进行的扩展plugins
webpack.config.js
中的plugins配置插件plugins: [
//配置打包 html 的 htmlwebpackPlugin
new HtmlWebpackPlugin({
//以现有的文件为模板来打包
template: ‘index.html‘
}),
new UglifyjsWebpackPlugin()
],
利用webpack 搭建本地服务器
所下载的服务器模块版本需要对应webpack的版本
npm install webpack-dev-server --save-dev
webpack.config.js
中文件配置devServer: {
//为哪个文件夹提供本地服务,默认为根文件夹
contentBase: ‘./dist‘,
//是否为实时刷新
inline: true
}
package.json
"dev": "webpack-dev-server --open"
npm run dev
原文:https://www.cnblogs.com/chuncode/p/12984779.html