首先确实自己电脑安装了node
node -v
也可以使用命令把node升级到最新的稳定版
npm i -g n
n stable
初始化项目
mkdir demo
cd demo
npm init
然后安装 webpack
npm install webpack -g
这个时候,就全局安装了webpack命令,注意,只是全局安装了webpack命令,并不是指在任意项目下就可以直接使用webpack了,这个时候,我们就要在项目内安装webpack的包与相关依赖
npm install webpack --save-dev
这个时候,我们的webpack就安装好了
最简单的使用
我们编写一个a.js
module.exports = {
test:function(){
console.log('hello world')
}
}
然后再编写一个b.js
const haha = require('./a.js')
haha.test()
这个时候,我们在命令行执行一下
node b.js
发现输出了 hello world,说明在b.js中成功的引用了a.js中的模块.这个时候,我们试一下webpack打包
webpack b.js build.js
然后就生成了一个build.js文件.我们也在命令行执行一下
node build.js
发现也输出了hello world .说明build.js成功的把a.js与b.js中的内容整合到自身中
使用webpack.config.js
当然,每次输入 webpack b.js build.js 会显得很麻烦,这个时候,我们就可以使用webpack.config.js来进行配置了
module.exports = {
entry: {
build: './b.js',
},
output: {
filename: '[name].js?v=[hash]',
}
};
这个时候,我们就可以直接在命令行输入 webpack 这个就在以达到之前一样的目的
webpack编译输出的含义
Hash: 表示当前文件的hash值
Version: 表示当前所使用的webpack版本
Time: 表示当前编译所使用的时间
| Asset | Size | Chunks | Chunk Names |
|---|---|---|---|
| 文件位置 | 文件大小 | 文件引用其它资源数量 | 本资源名称 |
引用的插件名称
引用插件的编译过程
配置命令行快捷方式
npm run
我们可以使用上诉命令查看,在本项目下有哪些可以快速执行的命令,还可以自行配置,在package.json中,scripts就是我们自行配置命令的地方.
比如我们添加一条:
“build”:”webpack”
这样,我们在命令行里运行
npm run build
就可以执行里面的命令了,这一点在配置参数比较的时候非常有用
配置浏览器自动刷新
首先,我们要安装相关插件
npm install webpack-dev-server --save-dev
这个时候,我们在package.json里面的scripts 中添加
"dev":"webpack-dev-server --env development",
"build":"webpack --env production"
其中 –env development 与 –env production 是指的是node环境,分别指的是开发环境与生产环境.
这个时候,我们就可以启动
npm run dev
来启动本地服务,并且自动更新.当然这个时候,我们进行的是全部刷新.当然我们可以这么配置package.json来进行热更新
"dev":"webpack-dev-server --env development",
"build":"webpack --hot --env production"
样式文件加载
首先在相关页面的js中引入css文件
import './cssPath'
要安装相关loader
- 使用css
npm install css-loader style-loader postcss-loader --save-dev
然后再创建一个postcss.config.js文件,在里面输入,这个主要用于自动添加浏览器前缀
module.exports = {
plugins: [
require('autoprefixer')()
]
}
然后在webpack.config.js中配置相关内容
module:{
rules:[
{
test: /\.css$/,
use: ['style-loader','css-loader','postcss-loader'],
},
],
},
注意,loader加载顺序是从右往左
使用es6
首先要安装相关插件
npm install babel babel-core babel-preset-es2015 --save-dev
然后配置 .babelrc 文件
{
"presets":["es2015"],
"plugins":[]
}
然后配置webpack.config.js
module:{
rules:[
{
test: /\.js/,
use: ['babel-loader'],
},
],
},
压缩文件
首先要安装相关插件
npm install babel-preset-minify --save
然后配置webpack.config.js
const BabiliPlugin = require('babel-preset-minify');
plugins: [
new BabiliPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_debugger: true,
drop_console: true
}
}),
],
抽出公共部分重复使用
首先编写一个vendor.js,里面主要是用于管理导入库(我一般的作法是把项目中所有引用的库在这里面再引用一遍)
import Vue from 'vue'
import .... from ...
然后配置webpack.config.js
//entry 中的内容添加
vendor : './vendor.js'
//plugins中的内容添加
new webpack.optimize.CommonsChunkPlugin({
names: ['common','vendor']
})