webpack5+webpack-dev-sever3打包初体验

1. 新建web文件夹项目包

初始化包命令

npm init -y 

得到package.json

使用npm命令安装需要用到的包
webpack5类

npm i webpack webpack-cli -D

css类loader

npm i less less-loader style-loader css-loader -D

vue类

npm i vue axios

vue类loader

npm i vue-loader vue-template-compiler -D

babel转译类loader(两套命令)

npm i @babel/core babel-loader @babel/plugin-transform-runtime -D

npm i @babel/preset-env @babel/plugin-proposal-class-properties @babel/runtime -D

插件类

npm clean-webpack-plugin html-webpack-plugin webpack-dev-server -D

图片及其他资源loader

npm i url-loader file-loader -D

**

2. web项目下手动创建webpack.config.js文件 配置webpack打包规则

**

const { resolve } = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
//自动清除包
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//导入在内存中生成 html页面的插件
//只要是插件，就一定要放到 plugins 节点中去
//这个插件的两个作用：
// 1.自动在内存中根据指定页面生成一个内存的页面
// 2.自动把打包好的 bundle.js 追加到页面中去
const HtmlWebpackPlugin = require('html-webpack-plugin');
//这个配置文件，其实就是一个JS文件，通过 Node中的模块操作，向外暴露了一个配置对象
module.exports = {
    // 入口，表示webpack打包哪个文件
    entry: './src/index.js',
    //输出相关文件的配置
    output: {
        //这是指定输出文件的名称
        filename: 'build.js',
        //指定打包好的文件，输出到哪个目录中去
        path: resolve(__dirname, './build')
    },
    target: 'web',
    //这个节点用于配置所有第三方模块加载器
    module: {
        //所有第三方模块的匹配规则
        rules: [
            {
                //匹配哪些文件
                test: /\.less/,
                //使用哪些loader进行处理
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                ///配置处理 .css 文件的第三方loader 规则
                test: /\.css/,
                //使用哪些loader进行处理
                use: [
                    'style-loader',
                    'css-loader',
                ]
            },
            {
                // 处理图片资源,但是处理不了html中img的路径问题//处理图片路径的 loader 
                test: /\.(jpg|png|gif|jpeg)$/,
                loader: 'url-loader',
                options: {
                    // limit 是给定的值，是图片的大小，单位是byte，如果我们引用的图片大于或等于给定给定的limit值，
                    // 则不会转化为base64格式的字符串，如果图片小于给定的limit值，则图片就会被转化为base64格式的字符串

                    limit: 8 * 1024,
                    // 关闭es6
                    esModule: false,
                    name: '[hash:10].[ext]' //不重复名字
                },
            },
            {
                //处理字体文件的 loader
                test: /\.(ttf|eot|woff|woff2|svg)$/,
                loader: 'url-loader',
            },
            {
                //配置 Babel 来转换高级的ES语法
                test: /\.js$/, use: 'babel-loader',
                exclude: /node_modules/
            },
            //打包vue
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                // 打包其他资源
                exclude: /\.(css|js|html|vue)$/,
                loader: 'file-loader'
            }

        ]
    },
    //配置插件的节点
    // 自动打包运行
    // 指令：npx webpack-dev-server
    devServer: {
        contentBase: resolve(__dirname,'build'),
        compress:true,
        port: 4399,
        open:true
    },
    plugins: [
        new HtmlWebpackPlugin({
            //指定模板页面，将来会根据指定的模板页面路径去生成内存中的页面
            template: resolve(__dirname, 'src/index.html'),
            //指定生成页面的名称
            filename: 'index.html'
        }),
        // 一般这个插件是配合 webpack -p 这条命令来使用，
        // 就是说在为生产环境编译文件的时候，先把 build或dist(就是放生产环境用的文件) 目录里的文件先清除干净，再生成新的。
        new CleanWebpackPlugin(),
        new VueLoaderPlugin(),
    ],
    //vue有两种形式的代码 分别是compiler（模板）模式和runtime模式（运行时），v
//     ue模块的package.json的main字段默认为runtime模式， 指向了"dist/vue.runtime.common.js"位置
// 在main.js文件中，初始化vue是compiler模式的，因此出现上面的报错信息。
    resolve: {
        alias: {
            //使用这个模式的vue防止开发报错
          'vue$': 'vue/dist/vue.esm.js' 
        }
      },
    // 运行模式 开发模式和production产品模式
    mode: 'development',
};

3.web项目根目录下手动创建.babelrc 的Babel配置文件

{
    "presets": ["@babel/preset-env"],
    "plugins": ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]
}

4. 手动修改package.json文件中script部分

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve"
  },

build为打包命令
start为自动打包临时文件，并打开浏览器命令
以前的方法webpack-dev-server启动webpack会报以下错误：Error: Cannot find module ‘webpack-cli/bin/config-yargs’
使用webpakc server启动
webpack5和webpack-dev-server3有兼容性问题，使用webpakc server命令启动。暂时还不能启用hot热更新，页面不会自动刷新。

5. 手动创建src文件夹; src文件夹中创建index.html和index.js

完整文件目录