Dev/Webpack
Source Edit History
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