Webpack 笔记

深入浅出 Webpack. 吴浩麟

webpack 官网

安装

npm i -D webpack

概念

entry：入口
output：输出
loader：处理非JavaScript文件的转换器，导入任何类型的文件/模块
plugins：插件，例如可以打包优化和压缩
mode：模式，设置 mode: development 或 mode: production

思想

配置

文件 webpack.config.js

module.exports = {
    // 配置模块入口
    entry: './main.js',
    // 输出文件配置
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist'),
    },
    // 配置处理模块的规则
    module: {
        rules: {
            test: /\.css$/,
            use: ['style-loader', 'css-loader'], // loader
        }
    },
    // 配置模块寻找文件的规则
    resolve: {},
    // 插件 扩展功能
    plugins: [],
    // DevServer 的配置，当使用 DevServer 启动 Webpack 时，此项配置可生效	
    devServer: {},
    
    // 其他配置
    
    // 构建针对不同运行环境的代码
    target: 'web', // web | node | ...
    // 配置如何生成 Source Map
    devtool: 'source-map',
    // 监听文件更新
    watch: true, // 使用 DevServer 时，监听模式默认开启
    // 监听模式配置
    watchOptions: {},
    // 
}

Entry

入口

// string | Array<string> | Object
entry: './app/entry' // string
entry: ['./app/entry1', './app/entry2'] // array<string>
// 前两者生成一个Chunk，名为main
entry: {a: './app/entry-a', b: './app/entry-b'} // object
// object生成多个Chunk，名称为对象的键

// 动态配置
// 若项目中有多个页面，需为每个页面入口配置entry，不能使用静态值则可设置动态值
// 同步函数
entry: () => {
    return {
        a: './pages/a',
        b: './pages/b',
    }
};
// 异步函数
entry: ()=> new Promise((resolve)=>{
    resolve({
        a: './pages/a',
        b: './pages/b',
    });
});

Output

output.filename

输出文件的名称 string

若有多个chuck，则使用模板与变量
```
output.filename = '[name]_[hash].js' // '[hash:8].js' // hash 默认20位
```
output.path

输出文件存放在本地的目录，必须是绝对路径
```
output.path = path.resolve(__dirname, 'dist')
```

Module

配置处理模块的规则

modules.rules

配置模块的读取和解析规则 Array<Object>

条件匹配：test、include、exclude
应用规则：对选中文件使用Loader

modules.rules = [
    {
        test: /\.scss$/, // 正则表达式匹配文件名称
        use: ['style-loader','css-loader','sass-loader'], // 从后到前对文件使用Loader
        // 单个Loader可用rules[].loader = 'xx-loader'
        // 向loader传参：1.'xx-loader?params' 2.使用对象
        exclude: path.resolve(__dirname, 'node_modules'), // 排除node_modules目录下的文件
        // test、exclude、include可用类型：String|Reg|[Reg]|String
    }
]

modules.noParse

忽略对部分没采用模块化的文件的递归解析和处理

// RegExp|[RegExp]|function
noParse: /jquery|chartjs/ // 正则表达式
noParse: (content)=>{
    // content 代表一个模块的文件路径
    // 返回 true 或 false
    return /jquery|chartjs/.test(contest);
}

Resolve

寻找模块对应文件的规则

{
// 配置别名将原导入路径映射成新的导入路径
resolve.alias: {
    components: './src/components',
        // 将 import Btn from 'components/button' 替换为
        // import Btn from './src/components/button'
    'react$': '/path/to/react.min.js',
        // 缩小匹配范围，将 import 'react' 替换为 import '/path/to/react.min.js'
},
// 导入文件无后缀时，将带上后缀自动查找，使Webpack依次找 xx、xx.js、xx.json
resolve.extentsions: ['.js', '.json'],

// 所有导入语句必须带文件后缀
resolve.enforceExtension: true,
// node_modules 中的文件需带文件后缀，为兼容第三方模块，可设false
resolve.enforceModuleExtension: false,
}

DevServer

我们的需要：

提供http服务
监听文件变化自动刷新

安装

npm i -D webpack-dev-server

运行

webpack-dev-server

配置

// 代理
devServer.proxy
// 模块热替换功能
devServer.hot: true ,
// 在页面中注入代理客户端，负责网页刷新
devServer.inline: true,
// 要求命中任意路由时均返回 index.html，只适用于单html应用，若由多个单页组成可参考设置
devServer.historyApiFallback: true,
// 服务器的文件根目录
devServer.contentBase: path.join(__dirname, 'public') | false /*关闭暴露本地文件*/ ,
// 在响应中注入响应头
devServer.headers: {'X-foo': 'bar'},
// 服务监听地址，默认 127.0.0.1 只可本地访问
devServer.host: '0.0.0.0', // 是局域网内可访问
// 
devServer.allowedHosts: []
// 
devServer.disabeHostCheck 
// 使用https服务
devServer.https: true | object
// 
devServer.clientLogLevel
// 是否启用Gzip压缩
devServer.compress: true | false,
// 自动打开网页
devServer.open

实战

支持 ES6

使用Babel将ES6转换为ES5语法

.babelrc

babel 的配置文件

{
    "plugins":[], // babel 采用的插件
    "presets":[], // babel 采用的语法
}

使用

安装

npm i -D babel-loader
# 其余可按提示按需要安装

webpack配置

resolve.extensions = ['.ts', '.js']
module.rules = [{
    test: /\.js$/,
    user: ['babel-loader'],
}]

支持TypeScript

tsconfig.json

typescript的配置文件

使用

安装

npm i -D typescript awesome-typescript-loader

webpack配置

// webpack.config.js
module.rules=[{
    test:/\.ts$/,
    loader: 'awesome-typescript-loader',
}]

支持SCSS、Less

安装

# SCSS
npm i -D sass-loader css-loader style-loader
npm i -D node-sass
# Less
npm i -D less
npm i -D style-loader css-loader less-loader

webpack配置

// SCSS
module.rules = [{
    test: /\.scss/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
}]
// less
module.rules = [{
    test: /\.scss/,
    use: ['style-loader', 'css-loader', 'less-loader'],
}]

支持React

1. React 与 Babel

安装

npm i -D react react-dom
npm i -D babel-preset-react

babel配置，增加

{
    "preset": [
        "react"    
    ]
}

2. React 与 TypeScript

安装

npm i -D react react-dom @types/react @types/react-dom

配置 tsconfig.json

// 增加
{
    "conpilerOptions": {
        "jsx": "react"
    }
}

配置 Webpack

module.rules = [{
    test: /\.tsx$/,
    loader: 'awesome-typescript-loader',
}]

支持Vue

1. Vue 与 babel

安装

npm i -S vue
npm i -D vue-loader css-loader vue-template-compiler

webpack配置

module.rules = [{
    test: /\.vue$/,
    loader: 'vue-loader',
}]

2. Vue 与 TypeScript

安装

npm i -D ts-loader typescript

tsconfig.json 配置

{
    "compilerOptions": {
        "target": "es5",
        "strict": true,
        "module": "es2015",
        "moduleResolution": "node"
    }
}

Loader

具有文件转换功能。将文件看做模块

posted @ 2019-12-27 12:28 北风卷地白草折阅读(215) 评论(0) 收藏举报

刷新页面返回顶部

北风卷地白草折

stay hungry, stay foolish

Webpack 笔记

Webpack 笔记

安装

概念

思想

配置

Entry

Output

Module

modules.rules

modules.noParse

Resolve

DevServer

实战

支持 ES6

.babelrc

使用

支持TypeScript

tsconfig.json

使用

支持SCSS、Less

支持React

1. React 与 Babel

2. React 与 TypeScript

支持Vue

1. Vue 与 babel

2. Vue 与 TypeScript

Loader

公告