webpack其实很简单 最简单的就是官网示例的打包了
然后我写的一个最简单的 代码示例
const path = require('path');
module.exports = {
entry: './bin/www',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
target:"node",
externalsPresets: { node: true },
module: {
rules: [
{
test: /\.js/,
exclude: /(node_modules|bower_components)/,
use: ['babel-loader']
}
]
},
};
需要注意的是有的包打包一直出现错误 可能是那个包的依赖有问题
1 改版以后必须在命令行中选择 打包模式 才不会报警 或者在webpack.config.js 中配置mode 属性
说是修改package.json 和webpack.config.js 都可以 或者在命令行中明确指出
单一在某一环境中 可以在webpack.config.js
module.exports={
mode:"development",
entry:src_path,
output:{ } 亲测这个有效 在命令行中输出 有效不会报警
2 报错 HtmlWebpackPlugin is not defined
可能是new的时候写法问题 要引入 的他的名字变亮了才说明用到了
3 一直说webpack 什么大于2.0 什么plugins 的写法应该是什么什么的 uninstall 卸载 webpack 与webpack-cli 用npm 全局安装和 本地安装一遍
卸载 npm uninstall webpack webpack-cli -g
npm unsinstall webpack webpack-cli --save-dev
安装 npm install webpack webpack-cli -g
npm install webpack webpack-cli --save-dev
4 报错 什么什么 is not function 升级到最高版本 即可
降低版本 npm install .....@**
升级到最高版本 删掉 package.json 里面的 对应配置 然后在 npm install 一下 即可
Vue项目升级到Webpack 4.x初步踩坑总结_harsima的博客-CSDN博客
webpack 的babel配置 插件的安装 是这几个插件 一开始不知道下载什么插件 一直报错
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.22.0",
.babelrc的配置
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": [ "transform-vue-jsx","transform-runtime"]
}
特别注意的是babel 只是转换了静态方法和语法 并没有转换 实例方法 和一些API 要想做到includes在低版的浏览器支持
. 全局babel-polyfill(使用babel-preset-env插件和useBuiltIns属性)
- 使用方法
packge.json
引入依赖babel-preset-env
.babelrc
中使用配置preset-env
- 指定
useBuiltins
选项为true
- 指定浏览器环境或node环境, 配置需要兼容的浏览器列表
- 在
webpack
入口文件中使用import/require
引入polyfill
, 如import 'babel-polyfill'
- 以上配置完成之后,
babe
l会根据指定的浏览器兼容列表自动引入所有所需的polyfill
, 不管你代码中有没有使用
- .babelrc示例
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["ie >=9"]
},
"useBuiltIns": true,
"debug": true
}]
]
}
- 优点
-
按需(按照指定的浏览器环境所需)引入
polyfill
, 一定程度上减少了不必要polyfill
的引入 -
配置简单, 无需对
webpack
做额外的配置 -
注意:
- 不可与方法3混用,否则会引起冲突
- 全局方式要保证
polyfill
在所有其它脚本之前被执行(首行import
或者设置为html的第一个<head>
标签)
-
Gulp
https://www.cnblogs.com/2050/p/4198792.html
打包
最简单的
module.exports = {
mode: 'production',
entry: __dirname + '/index.js',
output: {
path: __dirname + '/dist',
filename: 'dist.js',
},
module: {
rules: [
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader'],
},
{
test: /\.scss$/,
use: ['vue-style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.sass$/,
use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax'],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
scss: ['vue-style-loader', 'css-loader', 'sass-loader'],
sass: [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax',
],
},
// other vue-loader options go here
},
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]',
},
},
],
},
// 阻止将import的引入打包进来
externals:{
"@r104/studio-directive":"@r104/studio-directive",
"@r104/studio-framework":"@r104/studio-framework",
"vue":"Vue",
"element-ui":"element-ui",
"right-npm-practice":"right-npm-practice"
}
};
入口 出口 写好 引入文件的解析 去掉不需要的引入 即可
需要注意的是externals 这个属性 首先 既然不在打包进来了 就需要script 的方式加载
所以需要在打包好的index.html中引入vue 因为script 中引入vue后 全局变量名叫Vue 区分大小写了 所以 我们这个配置要写 vue:"Vue" 意思是将指定的库改为变量名为Vue的使用 如果是小写的vue 就找不到了 没有这个变量
vue的引入
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入 http-vue-loader -->
<script src="https://unpkg.com/http-vue-loader"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
es6 的展开运算符不能识别
下载两个npm 包 然后配置.babelrc
{
"presets": [
["es2015","stage-3"]
],
"plugins":["transform-object-rest-spread"]
}
根据提示下载这两个包即可