前端工具的发展史

grunt
gulp
yeoman
webpack 前端模块化打包工具，有了它我们可以实现前端的模块化开发和代码自动构建。它最核心的功能是loader加载器，通过它可以加载不同类型的文件

1
2
3

npm init -y # 初始化一个空白项目
npm i webpack webpack-cli -D # 安装依赖项目
# 在项目文件夹中创建一个webpack.config.js文件

// webpack配置文件
// 是webpack的配置文件
const path = require("path");
module.exports = {
  entry: "./src/main.js", // 入口
  // 出口
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    // 加载器，有了这些loader插件之后 我们可以引入各种非js文件
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

然后在package.json文件中配置启动命令

...
 scripts: {
     "build": "webpack --config webpack.config.js --watch"
 }
...

1 2	# 启动编译 npm run build

前端工具的发展史

Hello World