本文从一个小Demo开始,通过不断增加功能来说明webpack的基本配置,只针对新手,也欢迎指正错误。
Node.js version: -v7.7.0 webpack 最好全局装一下
我们先从简单的Demo开始,首先我创建了一个项目目录webpack,在该目录下运行命令:
npm init
npm install webpack html-loader style-loader css-loader --save-dev
安装完成后我的package.json是这样子的:
{
"name": "webpack-example",
"version": "1.0.0",
"description": "A webpack example",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"webpack"
],
"author": "xiao555",
"license": "MIT",
"devDependencies": {
"css-loader": "^0.28.0",
"html-loader": "^0.4.5",
"webpack": "^2.3.3"
}
}
然后我在根目录下创建了index.html,style.css,entry.js,webpack.config.js:
// index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello Webpack</title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<h1>Hello Webpack!</h1>
<script src="/bundle.js"></script>
</body>
</html>
// style.css
h1 {
color: lightblue;
}
// entry.js
require('./style.css')
// webpack.config.js
let webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
}
}
然后修改一下package.json的scripts:
"scripts": {
"start": "webpack --config webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
好了,这样一个简单的Demo就完成了,让我们看一下效果:
➜ webpack npm start
> webpack-example@1.0.0 start /Users/zhangruiwu/Desktop/webpack
> webpack --config webpack.config.js
Hash: f9e8a168c2845147afb4
Version: webpack 2.3.3
Time: 384ms
Asset Size Chunks Chunk Names
bundle.js 73.1 kB 0 [emitted] main
[0] ./style.css 895 bytes {0} [built]
[1] ./entry.js 22 bytes {0} [built]
[2] ./~/base64-js/index.js 3.48 kB {0} [built]
[3] ./~/buffer/index.js 48.6 kB {0} [built]
[4] ./~/css-loader!./style.css 190 bytes {0} [built]
[5] ./~/css-loader/lib/css-base.js 2.19 kB {0} [built]
[6] ./~/ieee754/index.js 2.05 kB {0} [built]
[7] ./~/isarray/index.js 132 bytes {0} [built]
[8] ./~/style-loader/addStyles.js 8.51 kB {0} [built]
[9] ./~/style-loader/fixUrls.js 3.01 kB {0} [built]
[10] (webpack)/buildin/global.js 509 bytes {0} [built]
可以看到目录里生成了一个bundle.js,这就是webpack打包后的文件,我们在浏览器里打开index.html:
OK, 可以看到我们的css已经渲染上去了。 我们的webpack配置文件做了什么呢?
// webpack.config.js
let webpack = require('webpack')
module.exports = {
entry: './entry.js', // 入口文件,根据这个文件来决定打包哪些文件
output: {
path: __dirname, // 打包后文件存放的路径
filename: 'bundle.js' // 打包后文件的名称
},
module: { // 决定不同类型的模块如何处理
rules: [ // 决定了模块创建规则,
{
test: /\.css$/, // 匹配文件类型
loader: 'style-loader!css-loader' // 应用加载器,'-loader'可以省略(v2好像不可以了)
}
]
}
}
好了,让我们改一下,我再目录里加了一张图片bg.jpg,修改了style.css :
h1 {
color: lightblue;
}
body {
background-image: url('./bg.jpg');
}
npm start 一下:
ERROR in ./bg.jpg
Module parse failed: /Users/zhangruiwu/Desktop/webpack/bg.jpg Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./~/css-loader!./style.css 6:94-113
@ ./style.css
@ ./entry.js
报错了,这个错误是什么呢?因为我们引入了一个jpg图片文件,要打包的话需要一个处理这种文件类型的loader:
// bash
npm i url-loader --save-dev
// webpack.config.js
module: {
rules: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.(jpe?g|png|gif|svg)$/,
loader: 'url-loader' // copy文件的loader
}
]
}
重新npm start,发现根目录下多了一个f58125a1fa5c143130104dc5fa9af77b.jpg, 浏览器打开index.html:
OK!
npm i stylus stylus-loader html-webpack-plugin --save-dev
调整目录结构:
- webpack
- src
- assets
- img
- bg.jpg
- style
- main.styl
- entry.js
- index.html
- webpack.config.js
- package.json
// index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello Webpack</title>
</head>
<body>
<h1>Hello Webpack!</h1>
</body>
</html>
// main.styl
h1
color lightblue
body
background-image url('~assets/image/bg.jpg')
// entry.js
import './main.styl'
// webpack.config.js
let webpack = require('webpack')
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
style: './src/style/entry.js' // 新的入口文件
},
output: {
path: path.join(__dirname, './dist'), // 新的打包目录
filename: '[name].js' // 这里的name对应entry的key值,这里是style,如果增加一个入口文件scrit的话,同样生成一个script.js
},
module: {
rules: [
{
test: /\.css$/,
loader: 'style-loader!css-loader?sourceMap'
},
{
test: /\.(jpe?g|png|gif|svg)$/,
loader: 'url-loader?name=static/[hash].[ext]' // '?'后跟loader的配置参数,这里name指文件名,static目录下
},
{
test: /\.styl$/, // 增加stylus文件的loader
loader: "style-loader!css-loader!stylus-loader?sourceMap" // 可以通过'!'来级联loader
}
]
},
resolve: {
alias: {
'assets': path.join(__dirname, './src/assets') // 定义别名,用法见main.styl 里 background-image url('~assets/image/bg.jpg')
}
},
plugins: [
// 这个插件用来处理html文件,https://github.com/jantimon/html-webpack-plugin , 这里的作业是吧index.html打包到dist目录下
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html'
})
]
}
npm start 之后生成的目录结构:
- dist
- static
- f58125a1fa5c143130104dc5fa9af77b.jpg
- index.html
- style.js
浏览器访问这个目录下的index.html,没有问题,为什么要把html搞到dist目录下呢? 可以F12看看body背景图片的url,是相对与打包目录dist的,也就是说这里访问的根目录是打包目录,我们的html也要放进去。
以FontAwesome为例:
npm install font-awesome --save
module: {
rules: [
{
test: /\.css$/,
loader: 'style-loader!css-loader?sourceMap'
},
{
test: /\.(jpe?g|png|gif|svg)$/,
loader: 'url-loader?name=static/[hash].[ext]'
},
{
test: /\.styl$/,
loader: "style-loader!css-loader!stylus-loader?sourceMap"
},
{
// FontAwesome 需要加载字体文件,(\?.*) 处理带版本号的文件
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name].[hash:7].[ext]'
}
}
]
},
html-webpack-plugin 这个插件处理多html文件,就是多new几次,也可以通过数组ForEach的方法:
let config = {
entry: {
style: './src/style/entry.js'
},
output: {
path: path.join(__dirname, './dist'),
filename: '[name].js'
},
module: {
rules: [
{
test: /\.css$/,
loader: 'style-loader!css-loader?sourceMap'
},
{
test: /\.(jpe?g|png|gif|svg)$/,
loader: 'url-loader?name=static/[hash].[ext]'
},
{
test: /\.styl$/,
loader: "style-loader!css-loader!stylus-loader?sourceMap"
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name].[hash:7].[ext]'
}
}
]
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'assets': path.join(__dirname, './src/assets')
}
},
plugins: []
}
const array = ['index', 'test']
array.forEach((file) => {
const conf = {
filename: `${file}.html`,
template: `${file}.html`
}
config.plugins.push(new HtmlWebpackPlugin(conf))
})
module.exports = config
以jquery为例:
npm i file-loader --save-dev
npm i jquery --save
- src
- script
- entry.js
// entry.js
import 'copy!jquery/dist/jquery.min.js'
// webpack.config.js
entry: {
style: './src/style/entry.js',
script: './src/script/entry.js' // 新增入口文件
},
...
resolveLoader: { // 处理loader
alias: {
'copy': 'file-loader?name=[name].[ext]', //&context=./src
}
},
npm start 后会发现/dist 目录下jquery.min.js已经单独打包出来了
以BrowserSync为例:
npm i browser-sync browser-sync-webpack-plugin --save-dev
let BrowserSyncPlugin = require('browser-sync-webpack-plugin')
let config = {
watch: true,
plugins: [
new BrowserSyncPlugin(
// BrowserSync options
{
// browse to http://localhost:3000/ during development
host: 'localhost',
port: 4000,
// proxy the Webpack Dev Server endpoint
// (which should be serving on http://localhost:3100/)
// through BrowserSync
// proxy: 'http://localhost:3100/'
server: {
baseDir: ['dist'],
directory: true // with directory listing
}
},
// plugin options
{
// prevent BrowserSync from reloading the page
// and let Webpack Dev Server take care of this
reload: true
}
)
]
}
会自动打开浏览器访问http://localhost:4000/, 修改被打包的文件会自动刷新
npm i autoprefixer nib poststylus babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 --save-dev
// ./src/style/variables.styl
blue = #0073aa
// ./src/style/main.styl
h1
color blue
let poststylus = require('poststylus')
...
plugins: [
new webpack.LoaderOptionsPlugin({
// test: /\.xxx$/, // may apply this only for some modules
options: {
stylus: {
use: [
poststylus([ 'autoprefixer' ]),
],
import: [
'~nib/index.styl',
path.join(__dirname, 'src/style/variables.styl')
]
},
babel: {
presets: ['es2015'],
plugins: ['transform-runtime']
}
}
}),
...
]
autoprefixer是个自动添加前缀的插件,nib是一个不错的css库,variables.styl可以作为stylus的全局变量加载,babel不用说,可以写es6的代码。
感觉把以上说的走一遍,webpack基本的配置就可以熟悉了,会引入loader,配置loader选项,会设置alias,会用plugins差不多。
至于现在一些比较大的项目中分多个配置文件,是根据不同的场景拆分开的,基本的一个webpack.base.config.js,主要包含loader,resolve等全局通用的部分,剩下的根据开发或者生产环境分成webpack.dev.config.js,webpack.prod.config.js,除了都会合并base的内容,其他可能跟去环境不一样像output, plugins也都有所不同。
另外,我说的不是很详细,有些东西还要自己去踩坑,比如loader和plugins的配置可以看官方文档,我没有详细说。
原文转载:https://www.xiao555.com.cn/posts/webpack-config
webpack ensure 有人称它为异步加载,也有人称为代码切割,他其实就是将 js 模块给独立导出一个.js 文件,然后使用这个模块的时候,再创建一个 script 对象,加入到 document.head 对象中,浏览器会自动帮我们发起请求
webpack 在前端工程中随处可见,当前流行的 vue, react, weex 等解决方案都推崇 webpack 作为打包工具。前端工具云集的时代,这是你值得选择的之一。
许多项目脚手架默认就会把src目录添加一个@别名,项目中实际引入时,虽然可以精简路径,但也带来一个很麻烦的问题:IDE无法识别这些别名,因此导致无法自动完成路径、无法识别引用资源的输出、出现不必要的告警等情况。
如何使用webpack构建多页面应用,这是一个我一直在想和解决的问题。网上也给出了很多的例子,很多想法。猛一看,觉得有那么点儿意思,但仔细看也就那样。使用webpack这个构建工具,可以使我们少考虑很多的问题。
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle
webpack是前端工程构建的一套工具,为什么一个程序称之为一套呢,是因为webpack其实是npm的一个模块,使用起来的话,这期间还需要很多其它模块来进行支持,所以我称之为一套工具。
Webpack已经流行好久了,但很多同学使用webpack时还是一头雾水,一下看到那么多文档、各种配置、各种loader、plugin立马就晕头转向了。我也不例外,以至于很长一段时间对webpack都是一知半解的状态
为了使用tree shaking,需要满足以下条件:使用ES2015语法(即import和export),在项目package.json文件中,添加sideEffects入口,引入一个能够删除未引用代码(dead code)的压缩工具(minifier)(例如:UglifyJSPlugin)
Webpack 作为目前最流行的前端构建工具之一,在 vue/react 等 Framework 的生态圈中都占据重要地位。在开发现代 Web 应用的过程中,Webpack 和我们的开发过程和发布过程都息息相关,如何改善 Webpack 构建打包的性能也关系到我们开发和发布部署的效率。
Vue中使用webpack别名的方法,需要引入公共文件,但是公共文件的文件路径里当前文件很远,那么就会形成上面示例中的那种路径很长的情况。而因为文件目录是约定俗成的,不可轻易更改,无法修改相对路径。那么该怎么办呢?
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!