什么是webapck?
简单来说,Webpack 就是一个针对 JavaScript 代码的模块打包工具。但是自发布以来,它演变成了一个针对所有前端代码的管理工具。
以前的代码的运行方式:
旧的任务运行工具处理方式:HTML、CSS 和 JavaScript 都是分离的。必须分别对每一项进行管理,并且还要确保所有东西正确地部署到生产环境。
像 Gulp 这样的任务运行工具可以操作很多不同的预处理器和编译器,但是在所有情况下,它都需要接收一个源码输入并将其处理成一个编译好的输出。然而,它是在不关心整个系统的情况下逐个去处理的。这就是开发者的负担了:检查任务运行工具有无遗漏的地方,并为所有改动的部分找到正确的方式,将它们在生产环境上协调一致。
Webpack 通过一个大胆的询问试图减轻开发者的负担:如果开发过程的某个部分可以自己管理依赖会怎么样?如果我们可以以这样一种方式来简单地写代码:构建过程仅基于最后所需要的东西来管理它自己,会怎么样?
Webpack 处理方式:如果是 Webpack 知道的代码,那么它就只会打包实际在生产环境当中使用的部分。
换句话说:你不是为了 Webpack 写代码,而是为了你的项目写代码。而且 Webpack 在保持进步(当然包括某些配置)。
总而言之,如果你曾经挣扎于下面这些情况中的其中之一:
- 不小心将一些不需要的样式表或者 JS 库引入生产环境,导致项目体积变大
- 遇到作用域问题 - 不管是来自 CSS 还是 JavaScript
- 不停寻找一个好的系统好让你可以在 JavaScript 代码里使用 Node 或 Bower 的模块,或者依赖一系列疯狂的后端配置来正确地使用那些模块
- 需要优化资源分发机制却又担心会破坏掉某些东西
那么你就可以受益于 Webpack 了。它通过让 JavaScript 取代开发者的大脑来关心依赖和加载顺序,轻松地解决了上面这些问题。
webpack安装
由于webpack是一个基于node的项目,所以首先需要确保你的电脑里面已经安装了node.js,以及npm。
如果速度太慢,建议大家使用cnpm。
首先,全局安装:
npm install webpack -g
安装成功之后,在命令行输入webpack -h即可查看当前安装的版本信息,以及可以使用的指令
webpack -h
当然,我们都应该将webpack安装到当前项目的依赖中,此时就可以使用项目的本地版本webpack
// 确保已经进入项目目录
//初始化一个package.json文件
npm init
//一路回车即可
// 安装webpack依赖,这里我们安装1.14.x的版本
npm install [email protected] --save-dev
// 简写
npm install [email protected] -S
// –save:模块名将被添加到dependencies,可以简化为参数-S。
// –save-dev: 模块名将被添加到devDependencies,可以简化为参数-D。
安装好之后我们的package.json应该是这样的:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"webpack": "^1.14.0"
}
}
webpack配置
webpack会自动搜索当前目录下的webpack.config.js文件,按照配置文件运行
下面是一个简单的webpack配置文件,只处理js
var path = require('path'),
webpack = require('webpack')
module.exports = {
entry: './src/main',
output: {
path: path.join(__dirname, './dist'),
filename: 'js/[name].js',
publicPath: '/dist/'
}
};
配置
entry
webpack入口设置
module.exports = {
entry: './src/main'
}
这里定义入口文件,可以单个,可以多个:
module.exports = {
entry: {
app: './app',
index: './index'
}
}
这里的入口文件路径都是相对于webpack.config.js文件的路径,文件后缀.js可以省略
output
打包编译输出设置
module.exports = {
output: {
path: path.join(__dirname, './dist'),
filename: 'js/[name].js',
publicPath: '/dist/'
}
}
output.path
打包编译生成的文件存储路径,这里是绝对路径
output.filename
打包编译生成的文件名,这里[name]会根据入口定义自动生成文件名
output.publicPath
其它文件生成的路径,例如:css、图片等等
loader介绍
Loader可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为参数,返回转换的结果。这样,我们就可以通过require来加载任何类型的模块或文件,比如VUE、JSX、SASS 或图片。
配置可以如下的写法:
module.exports = {
module: {
loaders: [
{
test: /\.vue$/, // 这里是正则表达式
loader: 'vue' // 这里是对应的loader
},
{
test: /\.css/,
loader: 'style-loader!css-loader'
}
]
}
}
loader怎么来呢,很简单,通过npm直接安装
npm install vue-loader css-loader vue-template-compiler -S
安装之后我们的package.json
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"css-loader": "^0.26.2",
"vue": "^2.2.1",
"vue-loader": "^11.1.3",
"vue-router": "^2.3.0",
"vue-template-compiler": "^2.2.1",
"vuex": "^2.2.1",
"webpack": "^1.14.0"
}
}
于是,我们的webpack配置文件就变成一下的样子:
var path = require('path'),
webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.css/,
loader: 'style!css'
}
]
}
}
未完:https://llp0574.github.io/2016/11/29/getting-started-with-webpack2/
https://github.com/petehunt/webpack-howto/blob/master/README-zh.md