文章目录
从零开始乱写项目
核心库版本
1 | "dependencies": { |
起步
基本框架
- npm init
- npm install webpack
- 创建几个目录
- src (放置一些源码)
- index.js - dist (这就是生存的文件的目录了)
- index.html (必须要提供一个 html 文件, 否则生成的 js 没办法单独执行) - webpack.config.js
- package.json
webpack
webpack.config.js
:
1 | const path = require('path'); |
webpack 打包
1 | webpack --config webpack.config.js |
webpack 就会将文件打包后,并且生成一个 dist/bundle.js
这个仅仅是打包而已
webpack 命令优化
修改 package.json
里面的 script
,增加 dev-build
1 |
|
webpack 开启 Server 调试
1 | npm install webpack-dev-server --save-dev |
注意 webpack-dev-server@3 仅仅支持 webpack@4
首先要修改 webpack.config.js
,增加 webpack-dev-server
的配置。
1 | devServer: { |
修改 package.json
里面的 script
,增加 server
1 | "scripts": { |
Webpack SVG
rules 加一条:
1 | { |
当然要记得先 install 一下:
1 | npm install svg-inline-loader |
使用方法:
1 | import logo from '../assets/logo/logo.svg'; |
Webpack Less
rules 加一条:
1 | { |
需要 install 好几个东西:
1 | npm install less --save-dev |
使用方法:
1 | import '../styles/Header.less'; |
Webpack PNG/TTF 的使用
rule 里面加一行:
1 | { |
然后代码中:
1 | import windows from '../assets/os icons/windows.png' |
css/less 里面则可以这样写:
1 | @font-face { |
Babel
安装 babel
1 | npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 |
创建一个新文件 .babelrc
:
1 | touch .babelrc |
然后将这些内容写进去:
1 | { |
这一定要写进去,不然会报错
然后在 webpack.config.js
里面添加一个 module 即可, 这个 module 实现了 babel-loader:
1 | /* src 文件夹下面的以 .js 结尾的文件,要使用 babel 解析 */ |
然后 webpack 重建一次
打开 dist/index.html
可以看到输出文字就代表成功了
React
1 | npm install --save react react-dom |