小磊哥ER的前端笔记

前端工程师必会的Webpack配置实战（一）

写在前面

  • 这里我会总结一些最基础的Webpack配置，也是前端工程师必须要知道的。

1.使用ES6语言

  • Babel 是一个 JavaScript 编译器，能将 ES6 代码转为 ES5 代码，让你使用最新的语言特性而不用担心兼容性问题，并且可以通过插件机制根据需求灵活的扩展。
1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                use: ['babel-loader'],
            },
        ]
    },
    // 输出 source-map 方便直接调试 ES6 源码
    devtool: 'source-map'
};

2.使用SCSS语言

  • SCSS 可以让你用更灵活的方式写 CSS。 它是一种 CSS 预处理器，语法和 CSS 相似，但加入了变量、逻辑、等编程元素。
  • 采用 SCSS 去写 CSS 的好处在于可以方便地管理代码，抽离公共的部分，通过逻辑写出更灵活的代码。和 SCSS 类似的 CSS 预处理器还有 LESS 等。
1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
    module: {
        rules: [
            {
                // 增加对 SCSS 文件的支持
                test: /\.scss$/,
                // SCSS 文件的处理顺序为先 sass-loader 再 css-loader 再 style-loader
                use: ['style-loader', 'css-loader', 'sass-loader'],
            },
        ]
    },
};

3.处理图片、字体等文件

  • 在css中或者js逻辑中，都会涉及到导入图片的情况，webpack可以内联图片地址到打包js中并且通过require()返回图片路径。当然，不只是图片，还有css中用到的iconfont。这里，我们需要用到 url-loader 或 file-loader 。
1
2
3
4
5
6
7
8
9
10
11
12
module:{
    loaders:[
        {
            test: /\.(png|jpg)$/,
            loader: 'url-loader?limit=8192' //  <= 8kb的图片base64内联
        },
        {
            test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
            loader: 'url?limit=10000&minetype=application/font-woff' // 字体文件限制
        }
    ]
}

4.使用Typescript

  • TypeScript 是 JavaScript 的一个超集，主要提供了类型检查系统和对 ES6 语法的支持，但不支持新的 API。 目前没有任何环境支持运行原生的 TypeScript 代码，必须通过构建把它转换成 JavaScript 代码后才能运行。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = {
    resolve: {
        // 先尝试 ts 后缀的 TypeScript 源码文件
        extensions: ['.ts', '.js'] 
    },
    module: {
        rules: [
            {
            test: /\.ts$/,
            loader: 'awesome-typescript-loader'
            }
        ]
    },
    devtool: 'source-map',// 输出 Source Map 方便在浏览器里调试 TypeScript 代码
};

5.使用Vue框架

  • Vue 是一个渐进式的 MVVM 框架，相比于 React、Angular 它更灵活轻量。 它不会强制性地内置一些功能和语法，你可以根据自己的需要一点点地添加功能。 虽然采用 Vue 的项目能用可直接运行在浏览器环境里的代码编写，但为了方便编码大多数项目都会采用 Vue 官方的单文件组件的写法去编写项目。
1
2
3
4
5
6
7
8
module: {
  rules: [
    {
      test: /\.vue$/,
      use: ['vue-loader'],
    },
  ]
}

6.使用React框架

  • React是用于构建用户界面的 JavaScript 库。React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。以声明式编写 UI，可以让你的代码更加可靠，且方便调试。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = {
  resolve: {
    // 先尝试 ts，tsx 后缀的 TypeScript 源码文件 
    extensions: ['.ts', '.tsx', '.js',] 
  },
  module: {
    rules: [
      {
        // 同时匹配 ts，tsx 后缀的 TypeScript 源码文件 
        test: /\.tsx?$/,
        loader: 'awesome-typescript-loader'
      }
    ]
  },
  devtool: 'source-map',// 输出 Source Map 方便在浏览器里调试 TypeScript 代码
};

相关资料

...
小磊哥er
2021-02-14
全部展开 回到顶部 滚到底部