webpack学习笔记

总结下遇到的问题，以及解决问题的步骤

npm install -S -D -g 有什么区别

-S 即 npm install module_name --save 写入dependencies
-D 即 npm install module_name --save-dev 写入devDependencies
-g 全局安装(命令行使用)
npm install module_name 本地安装(将安装包放在 ./node_modules 下)
dependencies与devDependencies有什么区别呢？

devDependencies 里面的插件只用于开发环境，不用于生产环境

dependencies 是需要发布到生产环境的

打包的权限问题

打开Powershell控制台输入命令：
set-ExecutionPolicy RemoteSigned

提示Module webpack-cli 不存在

由于webpack4后的版本，命令迁移至webpack-cli，因此还需安装webpack-cli

解决新版本手动打包失败的问题

webpack .\src\main.js -o .\dist\bundle.js
加入参数 -o

Babel遇到的问题：

一、babel7.X版本

cnpm i babel-core babel-loader@7 babel-plugin-transform-runtime –D

cnpm i babel-preset-env babel-preset-stage-0 -D

添加.babelrc配置文件:

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

二、使用babel8.X版本

cnpm i babel-loader ‘@babel/core’ -D

添加.babelrc配置文件:

{
    　　　"presets": ["@babel/preset-env"],

   　　　"plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"]

　　  }

vue中render使用组件报错

**在render中还是无法正常显示组件内容，Vue-loader在15.之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的
所以我们要在这两个(vue-template-compiler和vue-loader)的基础上再去下载这个插件，也就是要使用render渲染组件的话，需要下载三个包

cnpm i vue -S
cnpm i vue-loader vue-template-compiler -D
cnpm i vue-loader-plugin -S

然后在配置文件（webpack.config.js）那边要加上

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // ...
  plugins: [
    new VueLoaderPlugin()
  ]
}

一些小总结

webpack-dev-server打包文件

使用这个webpack-dev-server 帮我们实时打包生成的bundle.js文件 ,并没有存放在实际的物理磁盘上面，而是托管到了
电脑的内存中了,所有 我们在项目的根目录中无法找到 这个打包好的bundle.js

所以我们可以去认为,webpack-dev-server把已经打包好的文件 以一种虚拟的形式 存放到了这个项目的根目录中去 虽然我们看不到
但是这个打包好的文件跟 dis src是属于平级的 为什么不打包到dist里面呢 原因就是 速度快， 内存的访问速度很快，
磁盘的读写很慢 而且会消耗内存

html-webpack-plugin插件配置启动页面

好处 : 1. 自动在内存中根据指定页面生成一个存放在内存的页面
2. 自动把打包好的文件（如bundle.js）追加到页面中去

实现自动打开浏览器、热更新和配置浏览器的默认端口号

方式一：

1. 修改package.json的script节点如下，其中--open表示自动打开浏览器，--port 4321表示打开的端口号为4321，--hot表示启用浏览器热更新：

"dev": "webpack-dev-server --hot --port 4321 --open"

方式二：

1. 修改webpack.config.js文件，新增devServer节点如下：

devServer:{
        hot:true,
        open:true,
        port:4321
    }

2. 在webpack.config.js头部引入webpack模块：

const webpack = require('webpack');

2. 在plugins节点下新增：

 // 配置插件的节点
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
    ]

前端打包过程识别不了非js模块

需要导入第三方loader去处理其他类型的文件

cnpm i style-loader css-loader --save-dev     //css

cnpm i less-loader less -D			//less

cnpm i sass-loader node-sass --save-dev		//sacss

cnpm i url-loader file-loader --save-dev		//url

加载loader需要配置webpack.config.js中模块语句

module : {   //配置第三方模块
        rules: [ // 第三方模块的匹配规则
          { test: /\.css$/, use: ['style-loader', 'css-loader'] },//处理css文件的规则
          { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
          { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
          { test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43&name=[hash:8]-[name].[ext]' },
          { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },
          { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
      ]
      }