Webpack 环游世界

关于webpack的日常坑都在这里填了吧~

内嵌模版引擎(pug)

想要 webpack 环境支持 pug 引擎,只需几步操作即可:

安装依赖

1
2
3
4
#安装支持pug依赖
npm install pug pug-loader pug-filters -D
#安装支持jade依赖
npm install jade jade-loader -D

配置webpack.config.js

1
2
3
4
5
6
7
8
9
10
...
{
test: /\.jade$/,
loader: "jade"
},
{
test: /\.pug$/,
loader: 'pug'
},
...

使用(in Vue)

1
2
3
4
5
6
//使用pug语法
<template lang="pug">
#app
img.vue(src="./assets/logo.png")
Hello
</template>

分离 css 样式文件(原生JavaScript)

webpack 默认会把 css 打包到 bundle.js,由于 JavaScript 一般最后加载,所以可能会导致页面加载初期完全没有样式的丑态, 影响用户体验。因此在大部分情况下需要单独分离出样式文件。

安装依赖

1
npm i extract-text-webpack-plugin@next

特别注意使用 @next 安装最新版,因为  extract-...@3.xx 不支持 webpack@4.xx

配置 webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 引用
const ExtractTextPlugin = require('textract-text-webpack-plugin')

//配置加载器
const config={
...
module:{
rules:[{
test: /\.(css|styl)$/,
use: ExtractTextPlugin.extract({
fallback:'style-loader',
use:['css-loader','postcss-loader','stylus-loader']
})
}...]
}
//配置插件
plugins:{
...
new ExtractTextPlugin('[name].css') //*bug*
}
}

bug:css 存放的的位置目前只能设置为根目录,放在子目录会引起图片引用路径错误的问题

TS+WP 环境搭建

依赖关系

1
npm i -D webpack typescript awesome-typescript-loader source-map-loader

配置文件

tsconfig.json

1
2
3
4
5
6
7
8
9
10
11
12
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es6"
},
"include": [
"./src/**/*"
]
}

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
module.exports = {
mode: 'development',
entry: "./src/index.ts",
output: {
filename: "bundle.js",
path: __dirname + "/dist"
},

// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",

resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".json"]
},

module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.ts?$/, loader: "awesome-typescript-loader" },

// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
]
}
};

TSX(react)+WP 环境搭建

依赖关系

1
2
npm i -D webpack typescript awesome-typescript-loader source-map-loader
npm i -S react react-dom @types/react @types/react-dom

配置文件

tsconfig.json

1
2
3
4
5
6
7
8
9
10
11
12
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es6"
},
"include": [
"./src/**/*"
]
}

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
module.exports = {
mode: 'development',
entry: "./src/index.tsx",
output: {
filename: "bundle.js",
path: __dirname + "/dist"
},

// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",

resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".json"]
},

module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },

// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
]
}
};

开发模式 webpack-dev-server

相关依赖

1
npm i -D webpack-dev-server

配置文件 webpack.config.js

1
2
3
4
5
devServer: {
contentBase: "./public",
compress: true,
port: 9000
},