wepack4x(坑) + vue

  1. wepack
  2. node

第一次玩webpack,所以想记录一下踩的坑

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。在 webpack 处理应用程序时,它会在内部创建一个依赖图(dependency graph),用于映射到项目需要的每个模块,然后将所有这些依赖生成到一个或多个bundle

webpack

版本以及安装

$ node -v
v10.11.0
$ yarn global add webpack #npm install -g webpack(与webpack相同)
$ yarn global add webpack-cli #npm install -g webpack-cli(webpack3不需要)
#这里如果没有webpack-cli提醒你安装
The command moved into a separate package: @webpack-cli/init
Would you like to install init? (That will run yarn add -D @webpack-cli/init)(yes/NO)
$ mkdir webpack-vue
$ cd webpack-vue
$ yarn init yes
$ yarn add webpack webpack-cli --dev     #这里也可以不安装(我没有安装)

此时你的文件夹下面已经有了package.json文件

package.json

{
  "name": "webpack",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.18.0",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.4"
  }
}

目录格式

webpack-vue
├── index.html
├── package.json
└── src
​ └── index.js

$ yarn init yes
yarn init v1.10.1
question name (webpack-vue):
question version (1.0.0):
question description:
question entry point (index.js):
question repository url:
question author:
question license (MIT):
question private:
success Saved package.json
Done in 6.08s.
$ mkdir src
$ touch index.html
$ cd src
$ touch index.js

src/index.js

function component() {
  var element = document.createElement('div');

  // Lodash(目前通过一个 script 脚本引入)对于执行这一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

index.html

<!doctype html>
<html>
  <head>
    <title>起步</title>
    <script src="https://unpkg.com/[email protected]"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

执行 webpack --mode development,会将我们的脚本 src/index.js 作为 入口起点,也会生成 dist/main.js 作为 输出

$ webpack --mode development
Hash: f56c194c7486666d790d
Version: webpack 4.20.2
Time: 97ms
Built at: 10/09/2018 11:23:46 PM
  Asset   Size  Chunks             Chunk Names
main.js  4 KiB    main  [emitted]  main
Entrypoint main = main.js
[./src/index.js] 232 bytes {main} [built]

再看目录结构

webpack-vue
├── dist
│ └── main.js
├── index.html
├── package.json
└── src
​ └── index.js

多了一个dist文件夹,里面包含了一个main.js, dist/main.js就是输出

这里于webpack3不同的,这里不能像webpack3一样 wepack file.a file.b*

注意

  • webpack必须要全局安装,否则不能使用webpack指令;
  • webpack-cli必须要全局安装,否则不能使用webpack指令。
  • webpack4.x中webpack.config.js配置文件不是必须的。
  • 默认入口文件是./src/index.js,默认输出文件./dist/main.js,其他报错无效。
  • 不支持webpack 文件a 文件b的方式,如:webpack index.js bundle.js
  • node版本>8.9以上

其实以上的注意点只要看着官方文档一步一步做都可以避免

webpack+vue

安装依赖

$ yarn global add vue-cli

安装完vue cli后,我们就可以基于vue-webpack-simple模板和vue-webpack模板创建项目了。

开始项目

直接使用模板

$ vue init webpack-simple webpack-vue  #webpack-simple是项目模板的名称,webpack-vue是你要生成的项目名称

? Project name webpack-vue
? Project description A Vue.js project
? Author Twor <[email protected]>
? License MIT
? Use sass? Yes

   vue-cli · Generated "webpack-vue".

   To get started:

     cd webpack-vue
     npm install
     npm run dev

这样就生成一个webpack-vue模板

目录结构

webpack-vue
├── .babelrc // babel配置文件
├── .editorconfig
├── .gitignore
├── index.html // 主页
├── node_modules
├── package.json // 项目配置文件
├── README.md
├── src // 开发目录
├── webpack.config.js // webpack配置文件
└── yarn.lock

运行实例

$ cd webpack-vue
$ yarn run dev        #运行示例
yarn run v1.10.1
$ cross-env NODE_ENV=development webpack-dev-server --open --hot
Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html
$ yarn run build    #发布
yarn run v1.10.1
$ cross-env NODE_ENV=production webpack --progress --hide-modules
Hash: 6cffb3d4c4493dec5e2d
Version: webpack 3.12.0
Time: 5229ms
                                    Asset     Size  Chunks             Chunk Names
logo.png?82b9c7a5a3f405032b1db71a25f67021  6.85 kB          [emitted]
                                 build.js  99.2 kB       0  [emitted]  main
                             build.js.map   835 kB       0  [emitted]  main
Done in 6.22s.

看文档仔细 !


Edit with markdown