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
