image.png

    package.json文件中

    1. {
    2.   "name": "webpack3",
    3.   "version": "1.0.0",
    4.   "description": "",
    5.   "main": "index.js",
    6.   "scripts": {
    7.     "test": "echo \"Error: no test specified\" && exit 1",
    8.     "dev": "webpack-dev-server "
    9.   },
    10.   "author": "",
    11.   "license": "ISC",
    12.   "devDependencies": {
    13.     "babel-core": "^6.26.3",
    14.     "babel-loader": "^7.1.5",
    15.     "babel-plugin-transform-runtime": "^6.23.0",
    16.     "babel-preset-env": "^1.7.0",
    17.     "babel-preset-stage-0": "^6.24.1",
    18.     "file-loader": "^6.1.0",
    19.     "node-sass": "^4.14.1",
    20.     "sass-loader": "^7.3.1",
    21.     "url-loader": "^4.1.0",
    22.     "webpack": "^4.27.1",
    23.     "webpack-cli": "^3.1.2",
    24.     "webpack-dev-server": "^3.1.9"
    25.   },
    26.   "dependencies": {
    27.     "bootstrap": "^3.3.5",
    28.     "css-loader": "^4.3.0",
    29.     "html-webpack-plugin": "^4.4.1",
    30.     "jquery": "^3.5.1",
    31.     "less-loader": "^7.0.1",
    32.     "style-loader": "^1.2.1"
    33.   }
    34. }

    webpack.config.js文件中

    1. // 导入处理路径的模块
    2. var path = require('path');
    3. // 启用热更新的 第2步
    4. const webpack = require('webpack')
    5. //帮我们把html配置到内存中，把打包后的bundle.js注入到html中
    6. var htmlWebpackPlugin = require('html-webpack-plugin');
    8. // 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
    9. module.exports = {
    10.     entry: path.resolve(__dirname, 'src/main.js'), // 项目入口文件
    11.     output: { // 配置输出选项
    12.         path: path.resolve(__dirname, 'dist'), // 配置输出的路径
    13.         filename: 'bundle.js' // 配置输出的文件名
    14.     },
    15.     mode:'development',
    16.     devServer: { 
    17.         // 这是配置 dev-server 命令参数的第二种形式，相对来说，这种方式麻烦一些
    18.         //  --open --port 3000 --contentBase src --hot
    19.         open: true, // 自动打开浏览器
    20.         port: 3000, // 设置启动时候的运行端口
    21.         contentBase: 'src', // 指定托管的根目录
    22.         hot: true // 启用热更新 的 第1步,只更改修改部分
    23.       },
    24.       plugins: [ // 配置插件的节点
    25.         new webpack.HotModuleReplacementPlugin(), // new 一个热更新的 模块对象， 这是 启用热更新的第 3 步
    27.      // 添加plugins节点配置插件
    28.      new htmlWebpackPlugin({
    29.         template:path.resolve(__dirname, 'src/index.html'),//模板路径
    30.         filename:'index.html'//自动生成的HTML文件的名称
    31.     })
    32.     ],
    34.     module: { 
    35.         rules: [ 
    36.             // 匹配以.css结尾的文件
    37.             { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    38.             //处理css文件的规则
    39.             { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
    40.             { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
    41.             {   test: /\.(ttf|eot|svg|woff|woff2)$/,
    42.                 use: [
    43.                     {
    44.                         loader:'url-loader'
    45.                     }
    46.                 ]
    47.             }, // 处理 字体文件的 loader
    48.             { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
    49.         ]
    50.     }
    51. }

    .babelrc文件中

    1. {
    2.     "presets": ["env", "stage-0"],
    3.     "plugins": ["transform-runtime"]
    4.   }

    将三个文件配置完成后，输出命令

    1. npm i