npm 和 webpack

[WIP] Npm & Webpack

对于前端而言,基于 Node 的工具,如 Webpack, Gulp, Grunk 在前端中变得必要

NPM

下列命令可以拿到 npm 的 config :

npm config get prefix

这里可以获得全局的 prefix ,也可以把这个所有的配置 list 出来:

npm config list

对于一个 package, 可以有:

npm install npm@latest -g

-g 表示 global 下载的意思,等同于 --global. 同时对于你这些包,也可以 list

npm list --global

可以看到:

home/sitepoint/.node_modules_global/lib
├─┬ npm@6.9.0
│ ├── abbrev@1.1.1
│ ├── ansicolors@0.3.2
│ ├── ansistyles@0.1.3
│ ├── aproba@2.0.0
│ ├── archy@1.0.0
....................
└─┬ uglify-js@3.5.3
├── commander@2.19.0
└── source-map@0.6.1

这里有对应的包和模块,可以指定对应的 depth --depth=0

local npm

版本号前面的插入符号(^)表示安装时,npm将获取它可以找到的唯一主要版本必须匹配的包的最高版本(除非存在package-lock.json文件))。

This method of versioning dependencies (major.minor.patch) is known as semantic versioning. You can read more about it here: Semantic Versioning: Why You Should Be Using it.

--save-dev : devDependency

Webpack

静态资源的打包/加载工具

静态分析依赖关系

Webpack4 加入了 mode, 设置了 dev 和 prod 的 mode.

prod 去掉了 scope hosting 和 tree-shaking, 同时去掉开发阶段only的代码

同时 Webpack4 把一些社区插件替代了

Webpack 配置项目

注意事项: https://github.com/jantimon/html-webpack-plugin/issues/485

这个有个 utf-8 的配置问题,一开始用 webpack4 老出毛病

用下列命令创建项目

npm init

同时可以把 Webpack 相关的资源 install 下来,可以看到一个基本的目录(虽然下图是成品)

webpack_project

在 Webpack 中,web.config.js 是 webpack 配置文件,我们有文件:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.css$/,
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader'
},
],
},
]
},
plugins: [
new HtmlWebpackPlugin({
inlineSource: '.(js|css)$', // embed all javascript and css inline
template:'./src/static/index.html',
}),
new HtmlWebpackInlineSourcePlugin()
],
devServer: {
contentBase: './dist',
open: true
},
// scripts should be in package.json
// scripts: {
// "test": "echo \"Error: no test specified\" && exit 1",
// "dev": "webpack-dev-server --mode development",
// "build": "webpack --mode production"
// },
};

这里我们指定了 HtmlWebpackPlugin 和对应的 Html template:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello, world</title>
</head>
<body>
<select id="region-select">
<option value="华东">华东</option>
<option value="华南">华南</option>
<option value="华北">华北</option>
</select>
<div id="table-wrapper">
</div>
<script src="../index.js"></script>
</body>
</html>
<script src="../index.js"></script>

这一段指定了程序的入口。

实际上 Html 应该也是能按模块拆分了,但是我前端太菜了做不来。

在 index.js 中,我们可以:

import _ from 'lodash';
import source_data from './ife31data';

同时有:

export default sourceData;

这可以照着 ES6 Module 那套写,反正我们有 babel…

你也可以导入 CSS 或者静态文件:

import './style.css';
import './image-component';

(注意CSS作用域)

配置好规则的 Loader 会帮你解决

在 npm 的 package.json 中:

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --mode development",
"build": "webpack --mode production"
}

webpack-dev-server 能帮助你很好的开发

CSS Module

CSS Module, PostCSS 一套工具了…

参考资料