第一次接触的webpack是在一个3.x的资料中 在4.x的运用中遇到了好多的坑，我就以小白的身份把我使用webpaxk的过程分享出来，其中很多不足欢迎大佬们指正
node安装不再赘述
一．安装
- npm i webpack –D（在项目中安装）"webpack": "^4.16.5"
- npm install webpack-cli –g 4.x之后要单独安装
- 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
webpack4.x的使用历程
原文地址：https://www.cnblogs.com/Qqqing/p/9536912.html