小白学习webpack之路（未完，待修改）

创建项目

前提，已经安装好NodeJs，npm等环境
第一步，新建项目文件夹，例如名为webpack的文件夹

文件夹示例图片

开始操作

第二步，进入cmd，在这个目录下也就是webpack文件夹路径下，执行命令 npm init -y，这个操作不会出现交互式界面，直接在文件夹目录下生成package.json文件，package.json文件指出了我们的项目需要哪些依赖，在项目转移的时候不需要拷贝node_modules文件夹，在目录下执行npm install命令就可以重新生成全部依赖，package.json中内容如下：

{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2"
    },
    "dependencies": {}
  }

第三步，执行命令npm install webpack webpack-cli --save-dev 安装webpack和wenpack-cli套件，我换成了淘宝的镜像就把npm改为cnpm
第四步，新建如下的项目结构，src是源文件目录，dist是需要在浏览器中运行引用的目录

webpack-demo
  |- package.json
+ |- /dist
+   |- index.html
+ |- /src
+   |- index.js

第五步，修改package.json，增加"private": true，表明是私有的，避免不小心把项目发布了，注释掉"main":"index.js"，main的意思是发布后，加载的入口文件
第六步，安装其他依赖，基本的命令是npm install --save xxxx，这个步骤的作用是可以让我在html中不需要去引入<script>标签，然后会在项目中生成node_modules文件夹，--save xxxx和--save-dev的区别在于，--save-dev所安装的依赖只是开发过程中使用，而--save是项目发布后还能用到的依赖
第七步，一般来说，在需要刚才安装的依赖的js头部添加import _ from 'xxxx';表明将依赖引入
在第七步之后，执行npx webpack，这个命令不常见，因为还有接下来的操作，执行这个命令后会把src文件夹下的index.js和所需依赖一起打包成mian.js文件放到了dist目录下，但是为了更好的配置加载项我们需要在项目结构中增加webpack.config.js

webpack-demo
  |- package.json
+ |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

webpack配置文件内容

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

执行npx webpack --config webpack.config.js命令就是按照这个配置文件来打包

第八步，我们可以设置一个类似快捷方式的语句，不需要每次都执行npx webpack --config webpack.config.js，方法是在package.json中添加"build": "webpack"，package.json中内容如下：

{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2"
    },
    "dependencies": {
      "lodash": "^4.17.5"
    }
  }

之后每次我们只要执行npm run build命令就可以了

最后编辑于：2018.10.25 11:44:22