起步和管理资源的部分
之前一直不理解webpack和vue-cli什么关系，看了webpack文档发现，vue-cli就是帮你配置webpack，配置一个跟vue相结合的配置，如果webpack学的很好，那你甚至可以自己‘vue-cli’一个项目。
一、初始化项目：
创建一个项目文件夹，然后执行
npm init还有一种npm init -y这个的意思全部yes省去了按回车的步骤，初始化完项目，此时会生成一个package.json文件，里面是项目的一些配置，比如一些脚本操作，npm run build 的 build 是什么，还有安装的插件（plugins）和各种包。
二、本地安装webpack以及webpack cli：
npm install webpack webpack-cli --save-dev
新版本的webpack需要配合webpack-cli使用
三、开始正式构建我们的项目：
在根目录创建index.html以及src文件夹，在src文件夹创建index.js文件，
在html文件加入两个script标签，第一个用于引入lodash，
我不知道有什么用，我只知道是因为index.js里要用到这个lodash所以在这里引入了。
在package.json里新增 private：true确保我们的包是私有的，移除main:index.js防止意外发布我的代码。这两句话是什么意思呢？
这里的发布指的是让npm拒绝发布，这是私人存储库。
main属性也是用于发布时候的，当你的包、库发布了，别人下载之后就会默认main的地址，因为已经加了private属性，所以这个main已经没用了，因此删掉了。
前面使用script引入的lodash就是为了引入下面三条信息：
- 无法立即体现，脚本的执行依赖于外部扩展库(external library)。
- 如果依赖不存在，或者引入顺序错误，应用程序将无法正常运行。
- 如果依赖被引入但是并没有使用，浏览器将被迫下载无用代码。
创建一个bundle文件夹：调整一下目录结构。
webpack-demo
|- package.json
+ |- /dist
+ |- index.html
- |- index.html
|- /src
|- index.js
删除了html中对lodash的cdn引用，
那么index.js中需要用到lodash怎么办呢？此时就引出了包的安装。
npm install --save lodash
这里用到了
--save
这个的意思的是会打包到生产环境，也就是说项目上线了也需要使用这个包。而
--save-dev
就是只有在开发测试环境需要使用的包。安装好了，只需要在
index.js
文件中
import _ from 'lodash';就可以了，这个_是你自己命名的，可以命名其他的名字。
修改对index.js
的引用，修改成
当前目录下的main.js
因为即将要使用一个操作
npx webpack。
执行 npx webpack，会将我们的脚本作为入口起点，然后 输出 为 main.js。
此时打开
html
文件发现可以正常使用。
四、使用配置文件
webpack.config.js
：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
这里写的很清楚：
入口是src目录下的index.js生成总js文件名为bundle.js且生成位置为dist文件夹。
那么之前还没有
webpack.config.js
的时候，执行
npx webpack
就可以直接在dist生成
main.js
呢？显然就是默认配置，当
filename
修改为
bundle.js
的时候，再执行，发现已经变成
bundle.js
文件了。
五、修改
package.json
文件，增加一个
npm
脚本：
{
"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"
}
}
以后就不用执行
npx webpack
换成执行
npm run build。
通过向 npm run build 命令和你的参数之间添加两个中横线，可以将自定义参数传递给 webpack，例如：npm run build -- --colors。
通过之前的配置，我们只是能支持js文件，对于html css 等都是不支持的。 index.html 是直接新建在dist文件里的，而不是打包的时候生成的。 我们一个一个来解决。
六、加载css：
npm install --save-dev style-loader css-loader
在webpack.config.js中修改：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ }
};
现在在index.js中就可以引入css文件了
import './style.css';
引入的css文件会添加到
html的head
当中。
类似的还有：
npm install --save-dev file-loader
npm install --save-dev csv-loader xml-loader
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /\.(csv|tsv)$/,
use: [
'csv-loader'
]
},
{
test: /\.xml$/,
use: [
'xml-loader'
]
}
全局资源： 上述所有内容中最出色之处是，以这种方式加载资源，你可以以更直观的方式将模块和资源组合在一起。无需依赖于含有全部资源的 /assets 目录，而是将资源与代码组合在一起。例如，类似这样的结构会非常有用：
- |- /assets
+ |– /components
+ | |– /my-component
+ | | |– index.jsx
+ | | |– index.css
+ | | |– icon.svg
+ | | |– img.png
这种配置方式会使你的代码更具备可移植性，因为现有的统一放置的方式会造成所有资源紧密耦合在一起。假如你想在另一个项目中使用
/my-component
，只需将其复制或移动到
/components
目录下。只要你已经安装了任何扩展依赖(external dependencies)，并且你已经在配置中定义过相同的 loader，那么项目应该能够良好运行。
但是，假如你无法使用新的开发方式，只能被固定于旧有开发方式，或者你有一些在多个组件（视图、模板、模块等）之间共享的资源。你仍然可以将这些资源存储在公共目录(base directory)中，甚至配合使用 alias 来使它们更方便 import 导入。
