从零开始学webpack笔记 1

自行学习整理，边学边记，没了解过webpack的同学可以一点点看完，或许会有些帮助，不成熟的地方欢迎指正，转载请注明出处！！！

1，首先新建文件夹，我这里命名为webpack-test，然后在文件夹内运行

npm init -y

初始化项目，此时应该只有一个package.json文件

2，安装webpack及相关插件至项目

(-D意为开发环境使用的插件，不可省略)

npm i webpack webpack-cli -D

然后可以在“scripts”下加

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

这样就可以使用npm run build来进行打包了，也为了方便以后扩展，如果script上一行有"main": “index.js”，把它也删掉，因为入口文件稍后会重新指定

3，新建webpack.config.js文件，这是webpack的配置文件，打包时具体执行内容就是依照此文件

4，新建一个文件夹，命名为src，在src下新建index.js文件，show.js文件，index.html文件，index.css文件，先不用写内容，这时再回到webpack.config.js

5，编辑配置

// 引入路径模块，此模块Node已内置无需额外安装
const path = require('path'); 

module.exports = () => {
  return {
    // entry: path.resolve(__dirname, 'src/index.js'),  // 是下一行的简写，此时打包后文件为main.js
    // entry: {
      // main: path.resolve(__dirname, 'src/index.js'),
    // },
    entry: {
      // 如果打包后想叫别的名字还不想在output中写死，可以使用这种方法，output中使用[name]占位符
      index: path.resolve(__dirname, 'src/index.js'), 
      // app: path.resolve(__dirname, 'src/app.js'),  // 多入口的第二个入口
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'js/[name].js'
    }
  }
}

注解：

• __dirname：被执行文件的绝对路径，因为webpack.config.js在根目录，所以此时__dirname就代表根目录

• entry：打包入口，webpack打包时会通过入口文件，逐步查找关联的引用文件，现在前端项目大多为单页面应用，一般index.js足够关联所有，目前的写法是为多入口做准备
  1、path.resolve可以理解为cd操作，也可以使用path.join（可以理解为拼接）
  所以这里可以理解为从根目录cd到src再到index.js
  所以也可以这样写path.resolve(__dirname, ‘src’, ‘index.js’),

• output：打包出口
  1、path：打包出口路径
  2、filename：打包出口文件名，[name]为占位符，是entry中的inedx或main或app，可以保证打包文件具有唯一性

6，写一些东西进index.js和show.js

先在show.js中写

const Show = () => {
  console.log('show')
}

export default Show;

然后在index.js中导入show并写一些自己的东西

import Show from './show.js';

Show();
console.log(111);

7，运行打包

npm run build

此时webpck会以默认的production模式进行打包，如果不出意外会多出一个dist文件夹，里面的js文件就是打包文件，但production模式对观察不太方便

8，打包模式

我们可以在webpack.config.js内加入mode，mode设置为none，这是为了方便观察打包后的结构，平时开发可以设置为development，正式上线之前可以设置为production

const path = require('path');

module.exports = () => {
  return {
    mode: 'none', // development production
    // entry: path.resolve(__dirname, 'src/index.js'),
    entry: path.resolve(__dirname, 'src', 'index.js'),
    // entry: {
    //   build: [path.resolve(__dirname, 'src/index.js')]
    // },
    output: { 
      filename: 'js/[name].js',
      path: path.resolve(__dirname, 'dist'),
    }
  }
}

然后再运行npm run build，有兴趣的同学这时可以观察一下打包出来的内容，了解一下打包原理，这里不进行展开

9，终端运行不同模式打包

上面说我们可以手动更改mode的值去更改打包模式，但每次都要编辑文件比较麻烦，忘了改动也是问题，所以这里我们要更改 package.json 文件，以后每次运行不同模式只要 npm run 不同的build就行了。
在第二点中，我们有"build": “webpack”，现在把它进行更改，然后可以删除上一步添加的mode:'none’了

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build-dev": "webpack --mode=development",
    "build-pro": "webpack --mode=production"
  },

当然也可以把build-dev，build-pro命名为自己习惯的名字，然后终端运行
开发模式时

npm run build-dev

生产模式时

npm run build-pro

这样我们就可以方便的按心情打包了