Begins
In the process of learning vue, the beginning and I know nothing about vue webpack. Because we found a problem we must know why this is so processed, otherwise I can not, learn something profound, even with the use uncomfortable, just like in high school chemistry learning, I always ask why is this reaction. The beginning of each finished chemistry teacher would later say, do not ask why, the law of nature we just discovered. Why would he have a brief tell us, that time I was a student of chemistry best.
Now I will record their own learning process of this webpack
Webpack role is to help us achieve a better relationship between our optimized as much as possible to write code with the browser. Let the browser faster and better execution of the code we write. That's his goal. He is the only form of expression - in the form of modules used to accomplish this goal.
First, we need to look at a background story
Long, long ago, dk to develop a front-end program, established in a ga Da place of a computer folder called dk_project, this is called a "project" was. It took a long time, dk left the company to a bit new colleagues, found that the above dk_project computer folder when dk take over the work, because there is no clear identity, it was treated as a normal folder to DELETE off. Back to modern times, with the birth of npm, people realize that the establishment of a project directory should not be so hasty, and thus provides that if a folder is created as a project directory, then it should contain a package.json file. Description Information package.json file recording project: the project author, project description, project depends which package, plug-in configuration information, and so numerous benefits
Creating package.json
I'll assume you have installed the node (and if not, what method to Baidu installed), so the first thing we have to create a folder. In the folder we first perform a command (in shfit you hold down the button to create an empty file folder good and right-click, you will find that there is a place called ' Open a command window (w) here ', then click on will appear DOM ) and then execute the following command line
npm initWhen you execute the process of pressing Enter will find that we need to do some of the information exchange, making better configuration package.json this file we need, here are some number of adoption
The command line will let you fill in some of the projects introduce information in the form of interaction, introduced in turn follows directly enter :( I do not know how to fill out, the carriage return ...)
- name Project name
- version project version number
- description of the project description information
- entry point project entry file
- When the project started test command script command
- If you have Git git repository address, you can put this item in your Git repository
- keywords Keywords
- author of Jiaosha
- Certificates to be issued when the license required for the project, play usually ignore it
You can follow the above meaning, to fill their needs
After completion of the above file creation, you will find your folder will appear
You will find that there has been such a file.
webpack-cli command
Then do not worry, open a command line input
npm install webpack-cliAfter the success of this you will see the following
webpack.js the only
To know what it does, we need to know what is inside those parameters used to do
Now I see a more complete file webpack.js
"private": true,
"dependencies": {
"antd": "^2.11.1",
"classnames": "^2.2.5"
},
"devDependencies": {
"axios": "^0.15.3",
"babel-eslint": "^6.1.2"
},
"bin": {
"dk-cli": "./bin/dk-cli.js"
},
"scripts": {
"start": "node index.js"
},
"engines": {
"node": ">=6.9.0",
"npm": ">=3.10.10"
}
"publishConfig": {
"registry": "http://gongsineibu/nexus/repository/npm-hosted/"
}1.
privatePropertiesOptional field Boolean value. If private is true, npm will refuse to publish.
This prevents private repositories accidentally be advertised.
2.
dependencieswithdevDependenciesOne problem: dependencies attribute the difference between devDependencies?
When the project is specified dependencies production depends module;
devDependencies developed during the project development environment depends module.
Question two: Why do we need the production / development both environments?
To give a simple example:
During the development phase, we need to unit test module development, this time in the development environment devDependencies necessary to install the unit test module Mocha.
In a production environment dependencies, the user directly use project, then the development of the project has been completed. Then you do not need to unit test module, plus only affect performance.
3.
bin属性如果你需要使用 npm 开发一个命令行工具，那么这个属性就会很有用。否则请跳过以节约你的时间。
bin 属性可以让我们很简单制作命令行工具，具体如何制作可以跳转：使用 bin 属性制作命令行工具
4.
scripts属性scripts 中文名称为脚本，也就是说可以为我们带来便利。
以上面的配置为例：
scripts 的脚本运行方式是在命令行中输入 npm run <脚本名称>
上图中只有一个 start 值，那么运行时要输入 npm run start
如果不输入脚本，就需要在命令行中输入 node index.js 这行代码
真实情况是输入 node index.js 但是觉得这么太麻烦，就用 npm run start 去代替 node index.js。
5.
engines属性一直很纳闷一件事，就是怎么通过 package.json 文件就能知道当前项目依赖 node 的哪个版本，依赖 npm 的哪个版本。。。
后来偶然发现，package.json 中已经提供了这个一个属性，用来记录当前项目依赖 node 和 npm 的版本号。写法如下：
"engines": { "node": ">=6.9.0", "npm": ">=3.10.10" }6.
publishConfig属性当我们开发完自己的项目想要将它发布到 Npm 仓库就需要使用这个属性。默认情况下我们是往 Npm 公共仓库中发布包，默认地址是：
https://www.npmjs.com/，此时在package.json文件中可以不加这个属性。但是如果公司内部搭建了 Npm 私有仓库，此时发布包就不是往
https://www.npmjs.com/这个地址上发布了，而是公司内部提供的地址，如：http://gongsineibu/nexus/repository/npm-hosted/。此时配置如下："publishConfig": { "registry": "http://gongsineibu/nexus/repository/npm-hosted/" }补充：
- publicConfig 属性决定了我们发布包发布到哪里去。
- 那么什么决定我们下载包从哪里下载呢？
.npmrc文件记录从哪里下载包
使用webpack运行一个项目
当知道了上述的相关知识之后我们要开始运行一个文件。
我们在这个目录下 创建一个index.js文件 里面写上
console.log('hello world',process.argv);//先不要管process.argv是做什么的。我们已经可以启动了
然后了 打开命令行 输入（根目录下，也就是我们之前输入指令的地方）
node index.js你会发现他打印了 如下的内容
再然后，我们使用另一种方式去启动，如果node 之后的路径很长怎么办，总不能一直输入很长的路径吧
我们修改webpack.js中一个行数据，把
"text":" ...... ",//这一行换成"dev": "node index.js"
我们再次打开命令窗口，输入 npm run dev 然后回车，你会发现与node index.js输出的一模一样。
