webpack 使用流程

webpack 使用流程

1.创建文件目录

+ direaction
    - dist
    - src
        + css
        + js
        + images
        + index.html
        + main.js

2.初始化项目

```shell
npm init -y
```
| 文件目录
+ direaction
    - dist
    - src
        + css
        + js
        + images
        + index.html
        + main.js
    - package.json

3.基本配置文件 webpack.config.js

```javascript
module.exports = {
    entry: './src/main.js',
    output: {
        path: './dist',
        filename: 'bundle.js'
    }
}
```

4.webpack-dev-server使用

npm i webpack-dev-server -D //安装到本地开发依赖

• 这里打包我遇到了一个错误哈，配置文件中打包输出目录改为absolute path才OK。

• 由于不是全局安装的 webpack-dev-server, 所以需在 package.json文件中 scripts添加 "dev": "webpack-dev-server"

• 注意： webpack-dev-server 需要本地 webpack 依赖

//自动打开 端口 根路径  热加载
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]

5.loader 加载器

• css

  cnpm i style-loader css-loader -D
  

  module: {
      rules: [
          {test: /\.css$/, use: ['style-loader', 'css-loader']},
      ]
  }
  

• less

  cnpm i less-loader -D
  

          {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}
  

• sass

  cnpm i sass-loader -D
  

  • 提示需要 node-sass, sass, fibers 依赖
    使用 npm 装 node-sass 会失败，需要用cnpm

    cnpm i sass-loader node-sass sass fibers -D
    

  • 1.x版本 webpack use:[‘style’, ‘css’, ‘less’], 不带loader

• url

  //为了解决css中url问题
  background: url(../a.jpg)
  

  cnpm i url-loader file-loader -D
  //url-loader 依赖于 file-loader
  

  {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader'}
  

• ECMAScript 6

  • 第一套包

    cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
    

  • 第二套包

    cnpm i babel-preset-env babel-preset-stage-0 -D
    

  • 配置config

      //exclude 排除node_modules目录，否则webpack 会把目录下的js也打包，耗CPU和内存
      {test: /\.js$/, use: 'babel-loader', exclude: '/node_modules/'}
  

  • 根目录 创建 .babelrc 配置文件，文件为 JSON 格式，不能写注释，必须用双引号

  {
      "presets": ["env", "stage-0"],
      "plugins": ["transform-runtime"]
  }