使用webpack打包css文件

  1. 安装loader

    npm i style-loader css-loader -D
  2. 修改webpack.config.js这个配置文件:

    module: { // 用来配置第三方loader模块的
        rules: [ // 文件的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则
        ]
    }
  3. 注意:use表示使用哪些模块来处理test所匹配到的文件;use中相关loader模块的调用顺序是从后向前调用的.

使用webpack打包less文件

  1. 安装loader

    npm i less-loader less -D
  2. 修改webpack.config.js这个配置文件

    { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }

使用webpack打包sass文件

注意:有时候使用npm i node-sass -D装不上,这时候,就必须使用 cnpm i node-sass -D

  1. 安装loader

    npm i sass-loader node-sass -D
  2. 修改webpack.config.js这个配置文件

    { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

使用webpack处理css中的路径

  1. 安装loader

    npm i url-loader file-loader -D
  2. 修改webpack.config.js这个配置文件

    { test: /\.(png|jpg|gif)$/, use: 'url-loader' },
    { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }
  3. 可以通过limit指定进行base64编码的图片大小;只有小于指定字节(byte)的图片才会进行base64编码,并且设置图片是否被重命名。

     { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }

使用babel处理高级JS语法

  1. 运行npm i babel-core babel-loader babel-plugin-transform-runtime -D安装babel的相关loader包.
  2. 运行npm i babel-preset-es2015 babel-preset-stage-0 -D安装babel转换的语法.
  3. 在webpack.config.js中添加相关loader模块,其中需要注意的是,一定要把node_modules文件夹添加到排除项:

    { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
  4. 在项目根目录中添加.babelrc文件,并修改这个配置文件如下:

    {
    "presets":["es2015", "stage-0"],
    "plugins":["transform-runtime"]
    }
  5. 注意:语法插件babel-preset-es2015可以更新为babel-preset-env,它包含了所有的ES相关的语法。

注意:如果要通过路径的形式,去引入 node_modules 中相关的文件,可以直接省略 路径前面的 node_modules 这一层目录,直接写 包的名称,然后后面跟上具体的文件路径,不写 node_modules 这一层目录 ,默认 就会去 node_modules 中查找。

Last modification:August 4, 2018
If you think my article is useful to you, please feel free to appreciate