webpack配置笔记

时间 2019-12-04

标签 webpack 配置笔记繁體版

原文原文链接

//本文为前端小白自学笔记，内容不可信。参考大佬的文章：入门 Webpack，看这篇就够了css

1、基本配置

1. 准备工做

npm install -g webpack@3.5.3
// my-demo
npm init
npm install --save-dev webpack@3.5.3
复制代码

在根目录下建立两个文件夹html

public
app

建立三个文件前端

index.html --放在public文件夹中
Greeter.js-- 放在app文件夹中
main.js-- 放在app文件夹中

在index.html文件中写入最基础的html代码node

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root'>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>
复制代码

在Greeter.js中定义一个返回包含问候信息的html元素的函数webpack

// Greeter.js
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};
复制代码

main.js文件中咱们写入下述代码web

//main.js 
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());
复制代码

2. 正式使用

在根目录下新建一个名为webpack.config.js的文件，咱们在其中写入以下所示的简单配置代码npm

module.exports = {
  entry:  __dirname + "/app/main.js",//已屡次说起的惟一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}
复制代码

在命令行中输入webpack便可打包json

3.更快捷的执行打包任务

在package.json中对scripts对象进行相关设置便可，设置方法以下。segmentfault

{
  "name": "webpack-sample-project",
  "version": "1.0.0",
  "description": "Sample webpack project",
  "scripts": {
    "start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除
  },
  "author": "zhang",
  "license": "ISC",
  "devDependencies": {
    "webpack": "3.10.0"
  }
}
复制代码

在命令行输入 npm start 便可打包bash

2、生成Source Maps

1. Source Maps

Source Map则能够用于还原真实的出错位置，帮助开发者更快的Debug。

2. 配置

//webpack.config.js
module.exports = {
  devtool: 'eval-source-map', //新加入
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  }
}
复制代码

3、使用webpack构建本地服务器

1. webpack-dev-server

构建本地服务器，实现自动刷新等功能

2. 配置

npm install --save-dev webpack-dev-server@2.7.1
复制代码

把这些命令加到webpack的配置文件中，如今的配置文件webpack.config.js以下所示

module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },

  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  } 
}
复制代码

在package.json中的scripts对象中添加以下命令，用以开启本地服务器：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"
},
复制代码

终端输入npm run server便可

4、使用babel-loader

1. babel-loader

用于将使用ES6规范的js代码，转为ES5。

2. 配置

一次性安装这些依赖包

npm install --save-dev babel-core babel-loader babel-preset-env
复制代码

对文件进行配置

\\webpack.config.js
module.exports = {
  entry: __dirname + "/app/main.js",//已屡次说起的惟一入口文件
  output: {
      path: __dirname + "/public",//打包后的文件存放的地方
      filename: "bundle.js"//打包后输出文件的文件名
  },
  devtool: 'eval-source-map',
  devServer: {
      contentBase: "./public",//本地服务器所加载的页面所在的目录
      historyApiFallback: true,//不跳转
      inline: true//实时刷新
  },
  module: {
      rules: [
          {
              test: /(\.jsx|\.js)$/,
              use: {
                  loader: "babel-loader",
                  options: {
                      presets: [
                          "env"
                      ]
                  }
              },
              exclude: /node_modules/
          }
      ]
  }
};
复制代码

4、使用css-loader 和 style-loader

1. css-loader 和 style-loader

css-loader使你可以使用相似@import 和 url(...)的方法实现 require()的功能,style-loader将全部的计算后的样式加入页面中，两者组合在一块儿使你可以把样式表嵌入webpack打包后的JS文件中。

2. css-loader 和 style-loader

安装

npm install --save-dev style-loader css-loader
复制代码

配置

module.exports = {
  entry: __dirname + "/app/main.js",//已屡次说起的惟一入口文件
  output: {
      path: __dirname + "/public",//打包后的文件存放的地方
      filename: "bundle.js"//打包后输出文件的文件名
  },
  devtool: 'eval-source-map',
  devServer: {
      contentBase: "./public",//本地服务器所加载的页面所在的目录
      historyApiFallback: true,//不跳转
      inline: true//实时刷新
  },
  module: {
      rules: [
          {
              test: /(\.jsx|\.js)$/,
              use: {
                  loader: "babel-loader",
                  options: {
                      presets: [
                          "env"
                      ]
                  }
              },
              exclude: /node_modules/
          },
          {
            test: /\.css$/,
            use: [
                {
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }
            ]
          }
      ]
  }
};
复制代码

使用

// app/main.css
html {
  box-sizing: border-box;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, p, ul {
  margin: 0;
  padding: 0;
}
复制代码

咱们这里例子中用到的webpack只有单一的入口，其它的模块须要经过 import, require, url等与入口文件创建其关联，为了让webpack能找到”main.css“文件，咱们把它导入”main.js “中，以下

//main.js
import Greeter from './Greeter';
import './main.css';//使用require导入css文件
复制代码

5、使用CSS module

1. CSS module

全部的类名，动画名默认都只做用于当前模块

2. 安装

配置

module.exports = {

    ...

    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true, // 指定启用css modules
                            localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
                        }
                    }
                ]
            }
        ]
    }
};
复制代码

5、使用CSS预处理器

1. 使用CSS预处理器

Sass 和 Less 之类的预处理器是对原生CSS的拓展，它们容许你使用相似于variables, nesting, mixins,inheritance等不存在于CSS中的特性来写CSS。 postcss-loader 和 autoprefixer（自动添加前缀的插件）

2. 安装

npm install --save-dev postcss-loader autoprefixer
复制代码

//webpack.config.js
module.exports = {
    ...
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    }
}
复制代码

// postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}
复制代码