学习webpack基础笔记01

学习webpack基础笔记

1.webpack搭建环境最重要的就是如何使用loader和plugins,使用yarn/npm安装插件、预处理器，正确的配置好去使用

2.从0配置webpack

- 1.创建文件夹
	- yarn init -y (生成package.json)
	-在package.json里面写好
	"scripts": {
  	  "dev": "webpack-dev-server --config webpack.config.js",
 	   "build": "webpack --config webpack.product.config.js"
  	},
- 2.创建webpack.config.js文件配置
	- module.exports={}         导出配置文件
	- mode: "development | production | none" 指定运行环境，none可不写
	- entry: "./src/index.js"         入口环境
	- module: {rules:[{}]}      配置正则，loader预处理文件
	- plugins:[]          插件
- 3.创建src文件夹
	-index.html   写一个项目挂下点
	-index.js  引入项目挂载点，编写内容
	-index.css  编写css样式引入
- 4.不同的环境可以配置一个webpack.base.config.js
	-引入插件，将公共的配置提取出来，不同的环境配置，创建多个文件，在package.json里面声明引用
- 5.输出文件夹，可不写，默认dist,写的话要引入安装path
	output:{
    	path: path.resolve(__dirname,dist_dir)
  	},

3.常见plugin和loader

1. HtmlWebpackPlugin

2. ClearWebpackPlugin

3. VueLoaderPlugin

4. style-loader

5. css-loader

6. less / less-loader

7. scss / scss-loader

8. file-loader

...

module: {
    rules: [
      {
        test:/.css$/,
        loader: ['style-loader', 'css-loader']
      },{
        test:/.less$/,
        loader: ['style-loader', 'css-loader', 'less-loader']
      },{
        test:/.(jpg|png|svg)$/,
        loader: ['file-loader']
      }
    ]
  },

plugins: [
    new CleanWebpackPlugin(dist_dir),  ------清理html文件
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      title: 'Dev mode'
    })
  ]

{
  "name": "online",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --config webpack.dev.config.js",
    "build": "webpack --config webpack.prod.config.js"
  },
  "license": "MIT",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.4.2",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "style-loader": "^1.1.3",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11"
  }
}

vue基础配置

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

module.exports = {
  mode: 'development',//指定开发环境
  entry: './src/index.js', //入口
  module: {
    // 处理器
    rules: [
      {
        test:/.vue$/,
        loader:'vue-loader',
      },
      {
        test: /.js?$/,
        loader: 'babel-loader'
      },
      {
        test: /.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },
      {
        test: /.less$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  },
  plugins: [    //引入html的插件
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template:"./src/index.html"
    }),
  ]
}

{
  "name": "webpack01",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "webpack-dev-server --config webpack.config.js",
    "build": "webpack --config webpack.config.js"
  },
  "devDependencies": {
    "@babel/core": "^7.8.7",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.4.2",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "vue-loader": "^15.9.0",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "http-server": "^0.12.1",
    "vue": "^2.6.11"
  }
}

学习资料：山地人