首页 > 代码库 > webpack 学习笔记

webpack 学习笔记

学习资源来自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。


















webpack 学习笔记