Webpack

开始

(1)mkdir webpack-demo

(2)cd webpack-demo

(3)npm init -y (上面解释了什么是-y) 工程目录

webpack-demo|-package.json|-package-lock.json复制代码

//安装webpacknpm install --save-dev webpack复制代码

然后我们创建以下结构和文件

webpack-demo|-src    |-index.html|-main    |-main.js    |-Hello.js|-package.json|-package-lock.json复制代码

这里是Index.html的代码

// index.html      
        Webpack Demo        
    
      复制代码

这里是Hello.js的代码

module.exports = function() {  var Hello = document.createElement('div');  Hello.textContent = "Hello World";  return Hello;};复制代码

这里是main.js的代码

const Hello = require('./Hello.js');document.querySelector("#app").appendChild(Hello());复制代码

Webpack终端的使用方法

{extry file}出填写入口文件的路径，本文中就是上述main.js的路径，

{destination for bundled file}处填写打包文件的存放路径

填写路径的时候不用添加{}

webpack {entry file} {destination for bundled file}

执行webpack src/mian.js main/index.html

终端显示为

但是输入webpack src/mian.js main/index.html 很麻烦我们可以简化一下在根目录下创建webpack.config.js文件

webpack-demo |-src    |-index.html |-main    |-main.js    |-Hello.js+|-webpack.config.js |-package.json |-package-lock.json复制代码

webpack.config.js的代码

module.exports = {  entry:  __dirname + "/src/main.js",//唯一入口文件  output: {    path: __dirname + "/main",//打包后的文件存放的地方    filename: "bundle.js"//打包后输出文件的文件名  }}复制代码

**然后就可以使用webpack命令webpack(非全局安装需使用node_modules/.bin/webpack)**这条命令会自动引用webpack.config.js的选项

除了可以使用webpack命令以外，我们还可以使用，对npm进行配置后可以在命令行中使用简单的npm {script name}命令来替代上面略微繁琐的命令

...  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",+   "build":"webpack"  },...复制代码

npm start是一个特殊脚本命令，直接npm start既可。但是其他的脚本命令，需通过npm run {script name}来执行

最后执行 npm run build

你就可以用Webpack配置一个最简单的应用输出Hello World

补充知识

package-lock.json和package.json的区别

package.json 里面定义的版本范围是(^1.0.0),到具体npm install的时候，安装的是什么版本，要解析的时候才知道。这里面定义的依赖关系树，可以称之为逻辑树(logical tree)。

node_modules里面的才是npm实际安装确定的版本的东西。这里文件结构我们称之为物理树(physical tree)

package-lock.json可以理解为逻辑树和物理树的一个快照，里面有明确依赖版本，实际安装的结构，也有逻辑树的结构。让开发者只要确保存了源文件，到一个新的机器上，或者新的下载源，只要按照这个package-lock.json所指示的，就能确保与上次安装的一模一样

npm init会出现很多询问如果使用 -f(force) 或者 -y(yes)就会跳过询问直接生产package.json文件

--save 和 --save-dev

一个是开发环境的一个是生产环境的。开发环境的打包之后不会有，只有生产环境会有。

参考

webpack官方中文文档