Scratch From Zero Configuration
文章目录

从零开始乱写项目

核心库版本

1
2
3
4
5
6
7
8
9
10
11
12
13
 "dependencies": {
"react": "^16.6.0",
"react-dom": "^16.6.0"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"webpack": "^4.23.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"

起步

基本框架

  1. npm init
  2. npm install webpack
  3. 创建几个目录

  • src (放置一些源码)
    - **index.js**
  • dist (这就是生存的文件的目录了)
    - **index.html** (必须要提供一个 html 文件, 否则生成的 js 没办法单独执行)
  • webpack.config.js
  • package.json

webpack

webpack.config.js:

1
2
3
4
5
6
7
8
9
10
11
const path = require('path');

module.exports = {

entry: path.join(__dirname, 'src/index.js'),

output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
}
};

webpack 打包

1
webpack --config webpack.config.js

webpack 就会将文件打包后,并且生成一个 dist/bundle.js

这个仅仅是打包而已

webpack 命令优化

修改 package.json 里面的 script ,增加 dev-build

1
2
3
4
5

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev-build": "webpack --config webpack.config.js"
}

webpack 开启 Server 调试

1
npm install webpack-dev-server --save-dev

注意 webpack-dev-server@3 仅仅支持 webpack@4

首先要修改 webpack.config.js ,增加 webpack-dev-server 的配置。

1
2
3
devServer: {
contentBase: path.join(__dirname, './dist')
}

修改 package.json 里面的 script ,增加 server

1
2
3
"scripts": {
"server": "webpack-dev-server --config webpack.config.js"
}

Webpack SVG

rules 加一条:

1
2
3
4
{
test: /\.svg$/,
loader: 'svg-inline-loader'
},

当然要记得先 install 一下:

1
npm install svg-inline-loader

使用方法:

1
2
3
import logo from '../assets/logo/logo.svg';

<div id="logo" dangerouslySetInnerHTML={{__html: logo}} />

Webpack Less

rules 加一条:

1
2
3
4
5
6
7
8
9
10
11
12
13
{
test: /\.less$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'less-loader', options: {
strictMath: true,
noIeCompat: true
}
}]
},

需要 install 好几个东西:

1
2
npm install less --save-dev
npm install style-loader css-loader less-loader --save-dev

使用方法:

1
import '../styles/Header.less';

Webpack PNG/TTF 的使用

rule 里面加一行:

1
2
3
4
5
6
{
test: /\.(woff|woff2|eot|ttf|otf|png|jpg|gif)$/,
use: [
'file-loader'
]
}

然后代码中:

1
2
3
4
import windows from '../assets/os icons/windows.png'

...
<img src={windows}/>

css/less 里面则可以这样写:

1
2
3
4
5
6
7
@font-face {
font-family: 'cruise';
src: url('../assets/font icons/fonts/cruise.ttf') format('ttf'),
url('../assets/font icons/fonts/cruise.woff') format('woff');
font-weight: 600;
font-style: normal;
}

Babel

安装 babel

1
2
3
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0

npm install babel-plugin-import --save-dev

创建一个新文件 .babelrc:

1
touch .babelrc

然后将这些内容写进去:

1
2
3
4
5
6
7
8
{
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": []
}

这一定要写进去,不然会报错

然后在 webpack.config.js 里面添加一个 module 即可, 这个 module 实现了 babel-loader:

1
2
3
4
5
6
7
8
9
/* src 文件夹下面的以 .js 结尾的文件,要使用 babel 解析 */
/* cacheDirectory 是用来缓存编译结果,下次编译加速*/
module: {
rules: [{
test: /\.js$/,
use: ['babel-loader?cacheDirectory=true'],
include: path.join(__dirname, 'src')
}]
}

然后 webpack 重建一次

打开 dist/index.html 可以看到输出文字就代表成功了

React

1
npm install --save react react-dom