标签：runtime cal 运用 http 生成 stage resolve es6 package
第一次接触的webpack是在一个3.x的资料中 在4.x的运用中遇到了好多的坑，我就以小白的身份把我使用webpaxk的过程分享出来，其中很多不足欢迎大佬们指正
node安装不再赘述
一．安装
注意: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
标签：runtime cal 运用 http 生成 stage resolve es6 package
原文地址：https://www.cnblogs.com/Qqqing/p/9536912.html
