webpack入门学习 --Halo

起步和管理资源的部分

之前一直不理解webpack和vue-cli什么关系，看了webpack文档发现，vue-cli就是帮你配置webpack，配置一个跟vue相结合的配置，如果webpack学的很好，那你甚至可以自己‘vue-cli’一个项目。

一、初始化项目：

创建一个项目文件夹，然后执行 npm init还有一种npm init -y这个的意思全部yes省去了按回车的步骤，初始化完项目，此时会生成一个package.json文件，里面是项目的一些配置，比如一些脚本操作，npm run build 的 build 是什么，还有安装的插件（plugins）和各种包。

二、本地安装webpack以及webpack cli：

npm install webpack webpack-cli --save-dev 新版本的webpack需要配合webpack-cli使用

三、开始正式构建我们的项目：

在根目录创建index.html以及src文件夹，在src文件夹创建index.js文件，在html文件加入两个script标签，第一个用于引入lodash， 我不知道有什么用，我只知道是因为index.js里要用到这个lodash所以在这里引入了。 在package.json里新增 private：true确保我们的包是私有的，移除main:index.js防止意外发布我的代码。这两句话是什么意思呢？ 这里的发布指的是让npm拒绝发布，这是私人存储库。 main属性也是用于发布时候的，当你的包、库发布了，别人下载之后就会默认main的地址，因为已经加了private属性，所以这个main已经没用了，因此删掉了。

前面使用script引入的lodash就是为了引入下面三条信息：

无法立即体现，脚本的执行依赖于外部扩展库(external library)。
如果依赖不存在，或者引入顺序错误，应用程序将无法正常运行。
如果依赖被引入但是并没有使用，浏览器将被迫下载无用代码。

创建一个bundle文件夹：调整一下目录结构。

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

删除了html中对lodash的cdn引用， 那么index.js中需要用到lodash怎么办呢？此时就引出了包的安装。 npm install --save lodash 这里用到了 --save 这个的意思的是会打包到生产环境，也就是说项目上线了也需要使用这个包。而 --save-dev 就是只有在开发测试环境需要使用的包。安装好了，只需要在 index.js 文件中 import _ from 'lodash';就可以了，这个_是你自己命名的，可以命名其他的名字。

修改对index.js 的引用，修改成 当前目录下的main.js 因为即将要使用一个操作 npx webpack。 执行 npx webpack，会将我们的脚本作为入口起点，然后输出为 main.js。

此时打开 html 文件发现可以正常使用。

四、使用配置文件 webpack.config.js ：

const path = require('path');

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

这里写的很清楚： 入口是src目录下的index.js生成总js文件名为bundle.js且生成位置为dist文件夹。 那么之前还没有 webpack.config.js 的时候，执行 npx webpack 就可以直接在dist生成 main.js 呢？显然就是默认配置，当 filename 修改为 bundle.js 的时候，再执行，发现已经变成 bundle.js 文件了。

五、修改 package.json 文件，增加一个 npm 脚本：

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9",
      "lodash": "^4.17.5"
    }
  }

以后就不用执行 npx webpack 换成执行 npm run build。 通过向 npm run build 命令和你的参数之间添加两个中横线，可以将自定义参数传递给 webpack，例如：npm run build -- --colors。

通过之前的配置，我们只是能支持js文件，对于html css 等都是不支持的。 index.html 是直接新建在dist文件里的，而不是打包的时候生成的。 我们一个一个来解决。

六、加载css：

npm install --save-dev style-loader css-loader 在webpack.config.js中修改：

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
+   module: {
+     rules: [
+       {
+         test: /\.css$/,
+         use: [
+           'style-loader',
+           'css-loader'
+         ]
+       }
+     ]
+   }
  };

现在在index.js中就可以引入css文件了 import './style.css'; 引入的css文件会添加到 html的head 当中。类似的还有：

npm install --save-dev file-loader

npm install --save-dev csv-loader xml-loader

        {
          test: /\.(png|svg|jpg|gif)$/,
          use: [
            'file-loader'
          ]
        },
        {
          test: /\.(csv|tsv)$/,
          use: [
            'csv-loader'
          ]
        },
        {
          test: /\.xml$/,
          use: [
            'xml-loader'
          ]
        }

全局资源：上述所有内容中最出色之处是，以这种方式加载资源，你可以以更直观的方式将模块和资源组合在一起。无需依赖于含有全部资源的 /assets 目录，而是将资源与代码组合在一起。例如，类似这样的结构会非常有用：

- |- /assets
+ |– /components
+ |  |– /my-component
+ |  |  |– index.jsx
+ |  |  |– index.css
+ |  |  |– icon.svg
+ |  |  |– img.png

这种配置方式会使你的代码更具备可移植性，因为现有的统一放置的方式会造成所有资源紧密耦合在一起。假如你想在另一个项目中使用 /my-component ，只需将其复制或移动到 /components 目录下。只要你已经安装了任何扩展依赖(external dependencies)，并且你已经在配置中定义过相同的 loader，那么项目应该能够良好运行。

但是，假如你无法使用新的开发方式，只能被固定于旧有开发方式，或者你有一些在多个组件（视图、模板、模块等）之间共享的资源。你仍然可以将这些资源存储在公共目录(base directory)中，甚至配合使用 alias 来使它们更方便 import 导入。