webpack中加载器的基本使用

打包处理css文件

• ① 运行npm i install style-loader css-loader安装处理css文件的loader
• ② 在webpack.config.js中的module->rules数组中添加loader规则如下：

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

• ③在index.js中导入相关的css文件如下：

import './css/1.css'

完成以上步骤即可成功打包css文件

打包处理less文件

• ① 运行npm i less-loader less -D安装处理less文件的loader
• ② 在webpack.config.js中的module->rules数组中添加loader规则如下：

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

• ③在index.js中导入相关的less文件如下：

import './css/1.less'

完成以上步骤即可成功打包less文件

打包处理scss文件

• ① 运行npm i sass-loader node-sass -D安装处理scss文件的loader
• ② 在webpack.config.js中的module->rules数组中添加loader规则如下：

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

• ③在index.js中导入相关的scss文件如下：

import './css/1.scss

完成以上步骤即可成功打包scss文件

配置postCSS自动添加css的兼容前缀

• ① 运行npm i postcss-loader autoprefixer -D安装处理scss文件的loader
• ② 在项目根路径下新建postcss的配置文件postcss.config.js并初始化如下配置

const autoprefixer = require('autoprefixer')

module.exports = {
    plugings: [autoprefixer]
}

• ③在webpack.config.js的module->rules数组中修改css文件的loader规则如下：

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

完成以上步骤即可成功自动为有兼容性问题的css属性添加兼容前缀

webpack配置vue组件的加载器

• ① 运行npm i vue-loader vue-template-compiler -D安装处理scss文件的loader
• ②在webpack.config.js的module->rules数组中修改vue单文件组件的loader规则如下：

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    // 编译模式
    mode: 'development',
    entry: path.join(__dirname, './src/index.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    devServer: {
        static: {
            directory: path.join(__dirname, './'),
            watch: true
        }
    },
    plugins: [html_plugin, new VueLoaderPlugin()],
    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.vue$/, use: ['vue-loader'] }
        ]
    }
}

• ③在index.js中导入相关的vue文件如下：

import App from './components/App.vue'

完成以上步骤即可成功打包处理vue单文件组件

webpack打包发布

在package.json文件的scripts对象中添加build属性，value为"webpack"
然后终端运行npm run build即可打包
最终在根路径的build目录下生成打包结果