webpack 快速打包配置

版权声明：未经同意，不得随意转载转载 https://blog.csdn.net/lucky541788/article/details/83832574

功能：自动打包（npm run dev）；兼容 es6 的高级语法；兼容 scss、less、css、字体图标、常见图片格式

1.转到对应目录下并初始化

命令：cd /d E:\......
查询对应目录下的文件：dir
初始化命令：npm init -y

2.安装包

全局安装：cnpm i webpack webpack-cli -g（安装过了就不用了）
-S 安装：cnpm i webpack webpack-cli -S
-D 安装：cnpm i webpack-dev-server html-webpack-plugin style-loader css-loader less-loader less sass-loader node-sass url-loader file-loader babel-core babel-loader@7 babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0 -D

3.各个文件的配置

package.json

{
  "name": "kuaixuewu",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^1.0.1",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "node-sass": "^4.10.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack-dev-server": "^3.1.10"
  }
}

webpack.config.js

const path=require('path');
const htmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
    mode:'development',
    entry:path.join(__dirname,'src/main.js'),
    output:{
        path:path.join(__dirname,'dist'),
        filename:'bundle.js'
    },
    plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        })
    ],
    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']},
            {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:['url-loader']},
            {test:/\.(ttf|eot|svg|woff|woff2)$/,use:['url-loader']},
            {test:/\.js$/,use:['babel-loader'],exclude:/node_modules/},
        ]
    }
};

.babelrc

{
  "presets": [
    "env",
    "stage-0"
  ],
  "plugins": [
    "transform-runtime"
  ]
}