Webpack 笔记

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

  1. 安装

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

  2. babel配置，增加

    {
    "preset": [
        "react"    
    ]
}

2. React 与 TypeScript

  1. 安装

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

  2. 配置 tsconfig.json

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

  3. 配置 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  北风卷地白草折  阅读(208)  评论(0)  编辑  收藏  举报