总结下遇到的问题,以及解决问题的步骤
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)追加到页面中去
实现自动打开浏览器、热更新和配置浏览器的默认端口号
方式一:
- 修改
package.json
的script节点如下,其中--open
表示自动打开浏览器,--port 4321
表示打开的端口号为4321,--hot
表示启用浏览器热更新:
"dev": "webpack-dev-server --hot --port 4321 --open"
方式二:
- 修改
webpack.config.js
文件,新增devServer
节点如下:
devServer:{
hot:true,
open:true,
port:4321
}
- 在webpack.config.js头部引入
webpack
模块:
const webpack = require('webpack');
- 在
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/ },
]
}