webpack 初识

1.Webpack是什么，它有什么作用

把你的项目当做一个整体，通过一个给定的主文件（如：index.js），
Webpack将从这个文件开始找到你的项目的所有依赖文件，
使用loaders处理它们，最后打包为一个（或多个）
浏览器可识别的JavaScript文件。

• 模块化
• ES6,JSX,TypeScript转换为ES5
• Scss,less等预处理

2.全局安装Webpack

npm install -g webpack

目录结构

github地址：https://github.com/Caisen1988/webpack.git

directory.png

• app目录 -- 自己编写的js脚本
• public -- Webpack打包生成后的文件目标地址
• bundle.js -- Webpack生成的打包后的文件

4.理解配置Webpack的配置文件

• package.json

{
  "name": "testwebpack",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    //npm的start命令是一个特殊的脚本名称，其特殊性表现在，在命令行中使用npm start就可以执行其对于的命令，如果对应的此脚本名称不是start，
想要在命令行中运行时，需要这样用npm run {script name}如npm run build
    "start": "webpack --mode development",
    "server": "webpack-dev-server --open"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.11",
    "style-loader": "^0.20.3",
    "webpack": "^4.2.0",
    "webpack-cli": "^2.0.12",
    "webpack-dev-server": "^3.1.1"
  },
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  }
}

• 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"
                },
                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. 运行

npm start

6.效果