首页 > 代码库 > 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 学习笔记