webpack 4 采坑与gulp

小小程序员洋

已于 2023-02-23 14:40:20 修改

阅读量349

点赞数

文章标签： gulp vue.js javascript

于 2019-07-05 09:13:03 首次发布

本文链接：https://blog.csdn.net/qq_40257538/article/details/94715661

版权

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'
- 以上配置完成之后, babel会根据指定的浏览器兼容列表自动引入所有所需的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的引入

es6 的展开运算符不能识别

下载两个npm 包然后配置.babelrc

{
   "presets": [
   ["es2015","stage-3"]
   ],
   "plugins":["transform-object-rest-spread"]
}

根据提示下载这两个包即可

小小程序员洋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
webpack 4 采坑与gulp

1 改版以后必须在命令行中选择打包模式才不会报警说是修改package.json 和webpack.config.js 都可以或者在命令行中明确指出单一在某一环境中可以在webpack.config.jsmodule.exports={mode:"development",entry:src_path,output:{ } 亲测这个有效在命令行中...
复制链接

扫一扫