Webpack自动搭建模块

上一篇说了webpack 手动搭建模块，在开发中都是脚手架搭建好的自动化配置。那么怎么用webpack搭建个像脚手架那样的呢。主要有三步。

• 1. 手动搭建模块
• 2. 自动生成html模板
• 3. 配置webpack-dev-server的本地服务

1. 手动搭建模块在上个文章说了。
   点我查看

2. 自动生成html模板，比较简单，就是webpack的HtmlWebpackPlugin插件。这个插件不用另外安装，它存在于node_modules中。直接在webpack.config.js中使用即可

const HtmlWebpackPlugin = require('html-webpack-plugin');

...

 new HtmlWebpackPlugin({
            template: "index.html"
        }),

3. webpack-dev-server是启动本地服务的关键。安装的时候版本不同可能会有冲突，所以最好指定版本安装。

npm install webpack-dev-server@3.11.2 --save--dev
npm install webpack-cli@3.3.2 -g --save--dev

另外还需要在package.json中加入

// 在package.json 修改
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server",
    "build": "webpack --mode=development"
  },

在webpack.config.js中添加

devServer: {
        contentBase: path.join(__dirname, 'dist'), //本地服务根文件
        inline: true ,//实时刷新
        port: 8080
    }

最后运行。

npm run dev 

运行起来后直接在浏览器中输入localhost:8080 即可。而且修改东西后会自动更新页面。不用在npm run build一直输入命令刷新了。

完整配置
webpack.config.js

const  path = require('path')

const webpack = require('webpack');

const HtmlWebpackPlugin = require('html-webpack-plugin');

//一旦依赖node 就npm init
module.exports = {
    entry : './src/main.js', //入口文件
    output : {
        path : path.resolve(__dirname,'dist'),  //输出目录
        filename : 'bundle.js'  //输出文件名
    },
    mode: 'production',
    resolve : {
        //省略后缀名
        extensions : ['.js','.css','.vue'],
        alias : {
            '@':path.join(__dirname,'./src'),//这样 @就表示根目录src这个路径
            vue: 'vue/dist/vue.js',
        }
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                // options:vueloaderOptions(isDev),
                // exclude:/node_modules/
            },
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
        ]
    },
    plugins: [
        new webpack.BannerPlugin("版本归闻居士所有."),
        new HtmlWebpackPlugin({
            template: "index.html"
        }),
    ],
    devServer: {
        contentBase: path.join(__dirname, 'dist'), //本地服务根文件
        inline: true ,//实时刷新
        port: 8080
    }

}

package.json配置

{
  "name": "day06",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server",
    "build": "webpack --mode=development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.13.10",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.1.2",
    "html-webpack-plugin": "^5.3.1",
    "style-loader": "^2.0.0",
    "vue": "^2.6.12",
    "vue-loader": "^14.1.1",
    "vue-template-compiler": "^2.6.12",
    "webpack-dev-server": "^3.11.2",
    "webpack-cli": "^3.3.2"
  },
  "dependencies": {
    "vue": "^2.6.12"
  }
}