webpack中的loader配置插件及使用

根据王红元老师上课内容整理的笔记，后面用CLI应该会方便的多，分享给大家~
使用webpack之前，需要先下载好node和npm，安装好全局的webpack

这是我把所有操作完成后的目录，配置分离后删除了webpack.config.js文件，本来跟package.json在同一目录下

一、配置

新建webpack.config.js文件，配置出口和入口

const path = require('path');

module.exports = {
   
  entry: './src/main.js',
  output: {
   
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

终端输入npm init，生成package.json

// package.json
{
   
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
}

安装本地webpack，开发时依赖，打包后不需要

npm install webpack@3.6.0 --save-dev

// package.json
{
   
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
   
    "webpack": "^3.6.0"
  }

定义脚本，设置webpack命令为npm run build

// package.json
{
   
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
   
    "webpack": "^3.6.0"
  }
}

二、导入css文件

css-loader负责加载css文件

style-loader负责将样式添加到DOM中

使用多个loader，从右向左加载，–save-dev的位置不影响

npm install style-loader --save-dev
npm install --save-dev css-loader

// webpack.config.js
module.exports = {
   
  module: {
   
    rules: [
      {
   
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

三、导入less文件

less-loader版本过高会报错

npm install --save-dev less-loader@4.1.0 less

配置rules

// webpack.config.js
module.exports = {
   
    ...
    module: {
   
        rules: [{
   
            test: /\.less$/,
            use: [{
   
                loader: "style-loader" // creates style nodes from JS strings
            }, {
   
                loader: "css-loader" // translates CSS into CommonJS
            }, {
   
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }