江苏龙网

  1. 主页 > 生活百科 > >

webpack教程：如何从头开始设置 webpack 5( 三 )

Webpack


webpack教程：如何从头开始设置 webpack 5

文章插图
 
要解决这个问题，只需在项目的根目录中创建一个.babelrc文件 。可以使用preset-env和plugin-proposal-class-properties添加更多默认值 。
{  "presets": ["@babel/preset-env"],  "plugins": ["@babel/plugin-proposal-class-properties"]}现在运行npm run build 一切准备就绪 。
Images假设我们需要引用一张图片并直接导入到 JS 文件中，这样是无法正常工作的 。为了演示，创建 src/ images 并向其中添加图像，然后尝试将其导入到index.js文件中 。
src/index.js
import example from './images/example.png'/* ... */运行构建时，再次看到错误：
webpack教程：如何从头开始设置 webpack 5

文章插图
 
webpack有一些内置的asset modules ，可用于静态资源 。对于图像类型，我们将使用asset/resource,注意，这里是一个type，而不是loader 。
webpack.config.js
module.exports = {  /* ... */  module: {    rules: [      // Images      {        test: /.(?:ico|gif|png|jpg|jpeg)$/i,        type: 'asset/resource',      },    ],  },}构建后，可以在dist文件夹查看 。
字体和内联webpack 还有一个asset module ，可以使用asset/inline内联某些数据，例如svgs和字体 。
src/index.js
import example from './images/example.svg'/* ... */webpack.config.js
module.exports = {  /* ... */  module: {    rules: [      // Fonts and SVGs      {        test: /.(woff(2)?|eot|ttf|otf|svg|)$/,        type: 'asset/inline',      },    ],  },}Styles同样的需要使用 style loader才能在脚本中执行类似import 'file.css'的操作 。
现在很多人都在使用CSS-in-JS、styled-components和其他工具来将样式引入到他们的 JS 应用程序中 。
当网站只有一个 CSS 文件，仅能够加载一个CSS文件就足够了 。但如果想使用PostCSS，为了能在任何浏览器中使用所有最新的CSS特性 。或者想使用Sass, CSS预处理器，那就需要使用其它的 loader 处理 。
我想使用这三种方法——在Sass中编写，在PostCSS中处理，以及编译到CSS 。这需要引入一些加载器和依赖项 。
  • sass-loader — 加载 SCSS 并编译为CSS
  • node-sass — Node Sass
  • postcss-loader — 使用 PostCSS 处理 CSS
  • css-loader — 解析 css import
  • style-loader —— 将CSS注入到DOM中
npm i -D sass-loader postcss-loader css-loader style-loader postcss-preset-env node-sass就像Babel一样，PostCSS 也需要一个配置文件 postcss.config.js，在根目录中创建它，并输入以下内容：
postcss.config.js
module.exports = {  plugins: {    'postcss-preset-env': {      browsers: 'last 2 versions',    },  },}为了测试 Sass 和 PostCSS 是否正常工作，创建src/styles/main.scss，并输入以下内容：
src/styles/main.scss
$font-size: 1rem;$font-color: lch(53 105 40);html {  font-size: $font-size;  color: $font-color;}现在，将文件导入index.js并添加四个 loader。它们从最后编译到第一个，因此列表中最后一个是sass-loader，因为需要编译，然后是PostCSS，然后是CSS，最后是style-loader，它将CSS注入到DOM 中 。
src/index.js
import './styles/main.scss'/* ... */webpack.config.js
module.exports = {  /* ... */  module: {    rules: [      // CSS, PostCSS, and Sass      {        test: /.(scss|css)$/,        use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],      },    ],  },}


推荐阅读


上一篇：详解版 深入浅出 HTTPS

下一篇：最快速的寻路算法 Jump Point Search