webpack4.x的使用历程

Posted 2021-01-01 qqqing

第一次接触的webpack是在一个3.x的资料中 在4.x的运用中遇到了好多的坑，我就以小白的身份把我使用webpaxk的过程分享出来，其中很多不足欢迎大佬们指正

 node安装不再赘述

一．安装

1. npm i webpack –D（在项目中安装）"webpack": "^4.16.5"
2. npm install webpack-cli –g  4.x之后要单独安装
3. webpack --mode development 会自动生成一个dist文件夹并在下面生成main.js储存打包好的js文件

注意:index.js要在src文件夹在webpack默认从src文件夹下获取，不再支持 webpack a.js   b.js这种方式(打包的入口文件是‘./src/index.js‘，输出路径是‘./dist/main.js‘)

二．初始化

npm init –y（执行默认配置） -----会生成一个package.json的文件。

三. 安装loader

*css: css-loader, css-loader;

*css中的url: url-loader(use:‘url-loader?limit=??(图片大小的字节数)‘), file-loader;

*字体图标：{test:/.(ttf|eot|svg|woff|woff2)$/, use: "url-loader"},

*es6中的高级语法转换：
1.安装loader:
(1)npm i babel-core babel-loader babel-plugin-transform-runtime -D
(2)npm i babel-preset-env babel-preset-stage-0 -D
2.配置webpack

{test:/.js$/, use: "babel-loader",exclude:/node_modules/}

3.配置babelrc
在src下新建.babelrc文件并设置

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

四. vue中webpack的使用

1.安装vue的包 npm i vue -S

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

3.新建一个vue文件并引入
import Vue from ‘vue‘;默认引用的是vue/joson里配置的vue文 件是不全的 需要用到rende

import login from ‘./login.vue‘
render: function (createElement) {
return createElement(login)
}//向挂载的元素中直接覆盖一个名为login的组件  简写render:  c=>c(login)

五. webpack.config.js的配置

 

const webpack = require("webpack");
const htmlWebpackPlugin = require(‘html-webpack-plugin‘);
const path = require("path");
const VueLoaderPlugin = require(‘vue-loader/lib/plugin‘);
const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);
module.exports ={
    mode: ‘development‘,
    entry: {
        index: "./src/index.js",
        hw9:"./src/hw9.js"
    },
    output: {
        filename: "js/[name]-[hash].js",
        path: path.join(__dirname, "dist")
    },
    module: { // 处理对应模块
        rules: [
            {
                test: /.css$/,
                use: [ ‘style-loader‘, ‘css-loader‘, ]//处理css
            },
            {test:/.js$/, use: "babel-loader",exclude:/node_modules/},//es6
            {test:/.(jpg|png|gif|bmp|jpeg|webp|dpg)$/, use: "url-loader?limit=1079"},
            {test:/.(ttf|eot|svg|woff|woff2)$/, use: "url-loader"},
            {test:/.js$/, use: "babel-loader",exclude:/node_modules/},
            {test:/.vue$/, use: "vue-loader"}
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({  // Also generate a test.html
            filename : ‘index.html‘,
            chunks : [‘index‘],
            template: ‘src/index.html‘
        }),
        new HtmlWebpackPlugin({  // Also generate a test.html
            filename : ‘hw9.html‘,
            chunks : [‘hw9‘],
            template: ‘src/hw9.html‘
        }),
       new CleanWebpackPlugin(
            [‘dist/!*‘, ‘dist/!*‘,],　     //匹配删除的文件
            {
                root: __dirname,       　　　　　　　　　　//根目录
                verbose: true,        　　　　　　　　　　//开启在控制台输出信息
                dry: false        　　　　　　　　　　//启用删除文件
            }
        )

    ],
    devServer: {//配置此静态文件服务器，可以用来预览打包后项目
        inline:true,//打包后加入一个websocket客户端
        hot:true,//热加载
        contentBase: path.resolve(__dirname, ‘dist‘),//开发服务运行时的文件根目录
        host: ‘localhost‘,//主机地址
        port: 8080,//端口号
        compress: true//开发服务器是否启动gzip等压缩
    },
};

 

 

 

六. 其他详细请参考webpack 官方文档

https://webpack.github.io

https://www.webpackjs.com