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"]
    }
    
发布了2 篇原创文章 · 获赞 0 · 访问量 29
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览