webpack使用

webpack使用前端打包工具

• 前提环境安装nodejs npm
• 创建项目结构
  webpack_01
  -----js
    |—index.js
    |—hello.js
  -----index.html
• 初始化项目 npm init -y
• 安装webpack
  npm i webpack --save-dev
  npm i webpack-cli --save-dev
  安装失败可以使用以下全局方式
  npm install webpack -g
• 下面我们打开配置文件package.json文件,然后添加scripts字段:
  “scripts”:{
  “build”:“webpack”
  }
• 随便在index.js和hello.js写点代码
  • hello.js内容
    module.exports=‘hello’;
  • index.js 内容
    const hello = require(’./hello’);
    console.log($(hello));
• webpack.config.js内容
  module.exports = {
  entry: ‘./js/index.js’
  };
  添加完保存后,在项目目录下执行npm run build ,可以看到执行结果

参考文档：https://webpack.docschina.org/concepts/output/