webpack 学习笔记

Posted 2020-08-08 每天都要学进去一些

学习资源来自https://zhufengnodejs.github.io/doc/html/前端工程化/webpack.html

                 http://guoyongfeng.github.io/idoc/html/React课程专题/使用Webpack搭建生产环境工作流.html

这两个教程必须同时看着，互相补充。

 (impot和 export是es6新语法，需要用babel转一下，直接运行不了)

配置webpack.config.js时候，需要引入path模块。

例：console.log(path.resolve(__dirname));

结果： D:\workspace\vue_demo\vue_start\vue_webpack_spa

例：console.log(path.resolve(__dirname,"src/index.js"));

结果：D:\workspace\vue_demo\vue_start\vue_webpack_spa\src\index.js

npm run build 看看package.json里build对应的命令是webpack，相当于执行webpack，再看webpack的配置文件webpack.config.js，里面对应着输入输出，执行命令后，是把src文件夹下的静态文件编译到build目录下的build.js。

同理 npm run dev  看看package.json里dev对应的命令是webpack-dev-server

import 和 require其实是一样的，只是写法不一样

var React = require(‘react‘)
//这句等价于
import React from require(‘react‘)

这两句，在功能上完全没任何区别。

css文件单独加载插件配置loaders时，上边的

{
    test:/\.less$/,
    loader:"style!css!less"
},
{
    test:/\.css$/,
    loader:"style!css"
}
两个就不能要了。换成

{
    test:/\.less/,
    loader:extractTextPlugin.extract("style-loader","css!less")
},
{
    test:/\.css/,
    loader:extractTextPlugin.extract("style-loader","css-loader")
}
否则报错。
14.将应用代码和第三方代码分离。
会生成一个vendor.js和index.js，先引入vender.js因为它是第三方代码比如jquery等，再引入index.js它是从src编译过来的自己写的js。