npm 使用
- npm install -g http-server
-g： 代表是全局安装，作为命令行工具来使用 - npm install --save axios
--save 把模块安装到当前目录下，且模块名加载到package.json的dependencies下 - npm install --save-dev webpack，
--save-dev 模块名加载到devDpendencies；devDpendencies是测试代码之类的例如webpack此类打包工具的地方。跟包的函数功能关系分隔开的的
node_modules太大怎么办？：
一定要生成.gitignore文件 内部内容为 node_modules，将之排除掉
反之若要下载github的文件到本地克隆下来之后可以使用命令npm install来将package.json名下的dependencies中的库下载下来
webpack
我的理解webpack就是一个打包器，将源码通过node来进行打包生成一个main.js（即将多个js/css/img...等文件进行汇集）来减少请求
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')
}
};
将接口和输出口设置好；
在接口即index.js的里面进行逻辑引用各种工具模块库
src/index.js
+ import _ from 'lodash';
+
function component() {
var element = document.createElement('div');
- // Lodash, currently included via a script, is required for this line to work
+ // Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
dist/index.html
在输出口的html里引用的js文件只需要引用main.js
<!doctype html>
<html>
<head>
<title>起步</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
package.json 使用脚本
添加一个快捷方式
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"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"
}
}
loader资源
使用 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转为 JavaScript。为此，首先安装相对应的 loader：
npm install --save-dev css-loader
npm install --save-dev ts-loader
配置使用
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
}
};
在index.js下引入
+ import './style.css';
运行构建命令
npm run build
