200524

遇到的问题

• 每次装新插件都要重新启用pair

• CSS Modules ：无法跳转

• beautify与babel冲突，jsx：使用系统自带的格式化

• jsdoc-react：转回babel后解决了。
  原因是vscode提供的react为typescript
  安装typedoc
  npm i -D gulp typedoc gulp-typedoc

• webpack配置√

• webpack配置文件√

• webpack-cli√

• Chokidar 2 will break on node v14+

• Error: Cannot find module ‘webpack-cli’–解决方案
  原因： 得要全局安装
  解决方案： npm install webpack-cli -g

• webpack 报The ‘mode’ option has not been set, webpack will fallback to ‘production’ fo
  原因：没有指定mode
  解决方案：
  1.package.json中设置：

  "scripts": {
      "dev": "webpack --mode development",  // 开发环境，注释不要写代码里
       "build": "webpack --mode production"  // 生产环境
    }
  
  

2.webpack.config.js中设置：

//webpack.config.js
module.exports = {
    entry: './src/js/entry.js', //入口文件
    output: { //输出文件
        filename: 'index.js', //输出文件名
        path: __dirname + '/out' //输出文件路径
    },
    mode: 'development' // 设置mode
}

• Cannot find module ‘@babel/core’
  问题原因：babel-core的版本不对
  babel-loader 8 对应的 babel-core版本为：7
  解决方案：
  1.卸载babel-core
  npm un babel-core
  2.重新安装
  cnpm i -D @babel/core

• webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
  问题原因：webpack4已经升级不支持这种写法了,也就是说不在plugins里面进行操作。而是放在了optimization里面
  解决方案：在webpack.config.js里添加

//optimization与entry/plugins同级
optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: "commons",
                    chunks: "initial",
                    minChunks: 2
                }
            }
        }
    },

新的知识

• 

webpack

安装

• 安装Node.js

• 在Git或者cmd中输入下面这段代码, 通过全局先将webpack指令安装进电脑中
  npm install webpack -g

• 使用Git Bash here 或者 cmd cd命令使当前目录转到当前项目的目录下, 然后输入下面这段命令
  npm init

• 接下来会弹出一些信息, 就是一些项目名和一些参数的描述, 可以全部按回车使用默认信息, 完成之后项目文件夹下会生成一个package.json的文件
  

• 安装完成

• npm i -D webpack
  -S 安装到上线环境
  -D 安装到开发环境
  -g 安装到全局
  -i install
  直到等它显示版本号码就表示你成功了

• 再输入安装cli的指令 npm i -D webpack-cli

webpack配置

• 创建项目文件夹, 名字自起, 但路径名不要包含中文, 以及项目名也不要叫”webpack”, 并且不要包含大写字母.
• 创建并编写配置文件. 首先我们先介绍几个配置文件的参数.
  entry： 是 页面入口文件配置 （html文件引入唯一的js 文件）
  output：对应输出项配置
  path ：入口文件最终要输出到哪里，
  filename：输出文件的名称
  publicPath：公共资源路径
• 在你的项目目录下创建webpack.config.js配置文件, 通过这个文件进行webpack的配置, 并且还要创建一些路径保存基本文件. 例如:
  
• 待续

webpack loader加载器

• npm install babel-loader babel babel-core css-loader style-loader url-loader file-loader less-loader less --save-dev
• 修改webpack.config.js文件, 将加载器引入

module.exports = {
    entry :  './src/js/entry.js',
    output : {
        filename : 'index.js',
        path : __dirname + '/out'
    },
    module : {
        rules: [
            {test: /.js$/, use: ['babel-loader']},
            {test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style标签里*/
            //{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css变成文件通过link标签引入*/
            {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析图片*/
            {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成浏览器可以识别的css语言*/
        ]
    },
    }

多个js文件时, 如何进行引入

• 在src的js文件夹下创建一个基本的工具tool.js

//tool.js
var tool = {//获取DOM元素
    getDom: function(className) {
        return document.getElementsByClassName(className)[0];
    }
}
 
module.exports = tool;//模块出口

• src的js下创建一个demo1.js文件, demo2.js同理

var obj = require('./tool.js');
    var demo1 = {
    init: function() {
        this.bindEvent();
    },
    bindEvent: function() {
        //var demo1 = document.getElementsByClassName('demo1')[0];
        var demo1 = obj.getDom('demo1');
        demo1.onclick = this.changeStyle;
    },
    changeStyle: function() {
        this.style.width = '200px';
        this.style.height = '200px';
        this.style.background = 'green';
        console.log('1');
    }
}
 
module.exports = demo1;

图片的打包

• 在img文件夹下找个图片放进去
• 修改entry.js

//添加↓ 
var oImg = new Image();
oImg.src = require('../img/1.gif');//当成模块引入图片
document.body.appendChild(oImg);

多个html文件时怎么处理

配置文件中写入

entry : {index1: './src/js/entry.js', index2: './src/js/entry2.js'},
        output : {
                filename : '[name].js',//这样就可以生成两个js文件, 名字分别为index1.js, 和index2.js
                publicPath: __dirname + '/out',//添加静态资源, 否则会出现路径错误
                path : __dirname + '/out'
            },

webpack插件使用

• 重新下载一下webpack包
  将目录定位到当前项目目录, 输入npm install webpack
• 修改webpack.config.js, 将下面代码放到配置文件开头. 这样就可以使用插件了

var webpack = require('webpack');

• 插件信息写到定义后面

var uglifyPlugin = new webpack.optimize.UglifyJsPlugin({
    minimize: true
}); //代码压缩

var CommonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin('common'); //把公共模块提取出来, 并取名为'common'(名字自起), webpack之后再out文件夹下生成common.js, 测试时记得引入提取出来的公共模块js文件

var ExtractTextPlugin = require("extract-text-webpack-plugin"); //将css独立引入变成link标签形式, 使用该插件需要独立下载'npm install extract-text-webpack-plugin --save-dev', 同时下面的rules也必须更改

var providePlugin = new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery'
}); //引入jquery

webpack服务器

• 定位目录输入命令 npm install webpack-dev-server -g ,修改webpack.config.js文件

publicPath: 'http://localhost:8080/out',

• html文件所引用的目录也要更改:

<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>texttitle>
     <link rel="stylesheet" href="http://localhost:8080/out/index.css">
head>
<body>
    <a href="http://localhost:8080/index2.html">11a>
    <div class="demo1">div>
    <div class="demo2">div>
    <script src="http://localhost:8080/out/common.js">script>
    <script src="http://localhost:8080/out/index.js">script>
body>
html>

• webpack-dev-server一下看看效果
• 找到文件如果错误的位置
• “errorpath”: “webpack-dev-server --devtool eval-source-map --progress --colors”//取名不能带-
  
• npm run errorpath

VS Code

• 插件

React

JSX 中使用 Emmet 快速补全标签

{
    // 在默认不支持 Emmet 的语言中启用 Emmet 缩写功能。在此添加该语言与受支持的语言间的映射。
    // 示例: {"vue-html": "html", "javascript": "javascriptreact"}
    "emmet.includeLanguages": {"javascript": "javascriptreact"},
    // 启用后，按下 TAB 键，将展开 Emmet 缩写。
    "emmet.triggerExpansionOnTab": true
}

实现

• 内联样式：

var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      };
	<h1 style = {myStyle}></h1>

书写错误

• < p style={myStyle} > ：花括号

• var myStyle = {
  fontSize: 18,
  color: '#ff4f81'
};

• 数组：var arr = [
  喵喵喵数组①号,
  喵喵喵数组②号,
  ];

• 定义的组件名要大写。自定义的 React 类名以大写字母开头
  function Text1Message(props) {

• function WebName(props) {

致谢

https://blog.csdn.net/yusirxiaer/article/details/80598322