Webpack is a front-end tool to build JavaScript module scripts for browsers.
webpack编译JavaScript模块

Introduce

对比 Node.js 模块，webpack 模块能够以各种方式表达它们的依赖关系，几个例子如下：

Some perception

webpack-dev-server

为你提供了一个简单的 web server，并且具有 live reloading(实时重新加载) 功能
How to install

  1. npm install --save-dev webpack-dev-server

webpack.config.js often looks like…

  1. const path = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  3. const CleanWebpackPlugin = require('clean-webpack-plugin');
  4.   module.exports = {
  5.     mode: 'development',
  6.     entry: {
  7.       app: './src/index.js',
  8.       print: './src/print.js'
  9.     },
  10.     devtool: 'inline-source-map',
  11.    devServer: {
  12.      contentBase: './dist'
  13.    },
  14.     plugins: [
  15.       new CleanWebpackPlugin(['dist']),
  16.       new HtmlWebpackPlugin({
  17.         title: 'Development'
  18.       })
  19.     ],
  20.     output: {
  21.       filename: '[name].bundle.js',
  22.       path: path.resolve(__dirname, 'dist')
  23.     }
  24.   };

Intially

keywords: entry file, web

  1. run the command below in project directoy

npm install webpack webpack-cli webpack-dev-server —save-dev

  1. configure package.json, add “dev”: “webpack-dev-server —open” within script field.
  2. configure webpack.config.js ```javascript module.exports = { entry: ‘./main.js’, output: { filename: ‘bundle.js’ } };
  1. `main.js` is  an **entry file**(which webpack follow to build `bundle.js`), write you own code
  2. ```javascript
  3. document.write('<h1>Hello World</h1>');

index.html

  1. <html>
  2.   <body>
  3.     <script type="text/javascript" src="bundle.js"></script>
  4.   </body>
  5. </html>
  1. run command “npm run dev”

so the localhost page is supposed to be opened automatially

Pack

  1. run npx webpack

dist directoy generated and bundle.js blew.

  1. Now modify the index.html ```html

```

  1. open index.html in Chrome, the result is showing.

Question

what’s the relationship between vue and webpack