webpack学习之路（一）

时间  2019-11-18
标签 webpack 学习 之路 繁體版
原文   原文链接

　　写在开头：把学习webpack时的笔记贴上来以备不时之需，多摘自官方文档，阅读文档的时候中英文一块儿看的，中文文档有时比较生涩会加入本身的理解。html

安装：

前提：

　　你要有个node环境（推荐LTS版本）。node

本地安装： 

npm install --save-dev webpack            //安装最新版本
 
npm install --save-dev webpack@<version>  //安装指定版本

　　若是你安装的是版本v4及以后，还须要安装webpack-cli：webpack

npm install --save-dev webpack-cli

　　本地安装是官方推荐方法，由于利于项目的更新，而且webpack每每是经过一条或多条npm命令启动的，这些命令会在项目的本地node_modules目录下确认webpack是否安装。web

　　当你在本地安装 webpack 后，你可以从 node_modules/.bin/webpack 访问它的 bin 版本。（这句话没懂...)npm

全局安装：

npm install --global webpack

最最新版本安装：

npm install webpack@beta
npm install webpack/webpack#<tagname/branchname>

　　这些最新体验版本有几率是有bug滴，不要用于生产环境，本身玩玩就好啦。json

起步

　　来构建个最最最简单的项目～浏览器

　　建立项目目录、初始化项目并本地安装webpack、webpack-cli：app

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

　　ps：npm init用来初始化生成一个新的 package.json 文件，会向用户提一系列问题，使用-y（表明yes）则跳过提问阶段直接生成一个新的 package.json 文件。学习

　　建立如下目录结构、文件和内容：优化

project

 

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

 

src/index.js
 

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

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());
 

 

index.html
 

 
 
<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>
 

 

package.json
 

 
 
  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
+   "private": true,
-   "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2"
    },
    "dependencies": {}
  }
 

 

　　这样管理项目有如下一些问题：
 

     
 
  • 脚本与外部扩展之间的依赖关系不能明显到一眼就看出来；
    •  
 
  • 若是万一哪一个依赖没有引入或者引入错误那程序就报错啦；
    •  
 
  • 若是有个依赖被引入了可是程序没有使用的话浏览器就必须下载这些没必要要的代码。
    •  

 

　　咱们调整一下目录结构，"source"中的代码是咱们编辑和修改的代码，"distribution"代码是通过构建后压缩和优化的代码，最终将被浏览器加载。
 

project
 

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

 

　　要在index.js中绑定lodash依赖，须要本地安装：
 

 
 
npm install --save lodash
 

 

　　安装到打包到生产环境的安装包时使用npm install --save，安装用于开发环境的安装包使用npm install --save-dev。
 

src/index.js
 

 
 
+ import _ from 'lodash';
+
  function component() {
    let element = document.createElement('div');

-   // Lodash, currently included via a script, is required for this line to work
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());
 

 

dist/index.html
 

 
 
  <!doctype html>
  <html>
   <head>
     <title>Getting Started</title>
-    <script src="https://unpkg.com/lodash@4.16.6"></script>
   </head>
   <body>
-    <script src="./src/index.js"></script>
+    <script src="main.js"></script>
   </body>
  </html>
 

 

　　接下来执行npx webpack，它会把src/index.js做为入口，而后输出dist/main.js：
 

 
 
npx webpack

...
Built at: 13/06/2018 11:52:07
  Asset      Size  Chunks             Chunk Names
main.js  70.4 KiB       0  [emitted]  main
...

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
 

 

　　ps：这里的警告能够先不用管，后续会提。
 

　　webpack4能够无需任何配置开始使用，而大多数项目须要很是复杂的启动配置，所以webpack支持配置文件，这相比手动在终端输入大量命令高效地多：
 

project
 

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

 

webpack.config.js
 

 
 
const path = require('path');

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

 

　　再次启动：
 

 
 
npx webpack --config webpack.config.js

...
  Asset      Size  Chunks             Chunk Names
main.js  70.4 KiB       0  [emitted]  main
...

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
 
 

 

　　若是 webpack.config.js 存在，则 webpack 命令将默认选择使用它。咱们在这里使用 --config 选项只是向你代表，能够传递任何名称的配置文件。这对于须要拆分红多个文件的复杂配置是很是有用的。
 

　　考虑到用cli来运行本地webpack仍是很不方便，所以能够设置一个快捷方式：
 

package.json
 

 
 
  {
    "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"
    }
  }
 

 

　　如今就能够使用npm run build来代替npx命令，注意，使用 npm 的 scripts，咱们能够像使用 npx 那样经过模块名引用本地安装的 npm 包。这是大多数基于 npm 的项目遵循的标准，由于它容许全部贡献者使用同一组通用脚本（若是必要，每一个 flag 都带有 --config 标志）：
 

 
 
npm run build

...
  Asset      Size  Chunks             Chunk Names
main.js  70.4 KiB       0  [emitted]  main
...

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/.
 

 

　　ps：经过向  命令和你的参数之间添加两个中横线，能够将自定义参数传递给 webpack，例如：。npm run buildnpm run build -- --colors


        

            

        	





    

		

            
相关文章

            

                

                

                    

                

            


            
相关标签/搜索

            
        


    

        

            

        

        

        
        

        

        

    




	

    





    

    	

    

        每日一句
    

    
    
    	每一个你不满意的现在，都有一个你没有努力的曾经。
    







    

    


    



    

        本站公众号
    

    

           欢迎关注本站公众号,获取更多信息

        
    




    

    




	


	







    

        联系我们
        最近搜索
        最新文章
        
        沪ICP备13005482号-10

            MyBatis教程
            SQL 教程
            MySQL教程
            Java 教程
            Thymeleaf 教程
            Hibernate教程
            Spring教程 
            Redis教程