js webpack 配置路径_webpack的配置及使用

安装 cnpm i -g webpack-cli

配置 webpack.config.js：

mode

• none 不优化
• development 输出调试信息，设置process.env.NODE_ENV
• production 最高优化，启用压缩、忽略错误

entry

单入口——SPA 多入口——MPA

output

path: 路径——必须是绝对路径

module:
{
rules: [{ test: /.css$/i, use: ["style-loader", "css-loader"] }],
},

---

loader

解析js以外的东西

webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。

css-loader 读取css，输出js字符串。 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码。

style-loader 输出字符串

• css-loader 解析css文件、import
• postcss-loader+autoprefixer 加前缀
• less-loader 编译less

dev-server

cnpm i webpack webpack-cli webpack-dev-server css-loader style-loader file-loader url-loader -D

• webpack 核心
• webpack-cli 命令行
• webpack-dev-server dev-server核心

html的路径不用dest,只写bundle.js。

用于开发环境生产环境的文件路径不同，所以需要两套配置，在config文件夹下创建webpack.production.js和webpack.development.js，并在webpack.config.js中将webpack.production.js展开后进行判断，如果存在production，及使用其路径文件。不存在就使用development。

const path = require("path");
module.exports = function ( env, argv) {
env = env || { development: true };
return {
entry: "./src/js/index.js",
...(env.production
? require("./config/webpack.production")
: require("./config/webpack.development")),
};
};

plugin

cnpm i html-webpack-plugin -D

帮助build生成HTML文件

{ ..., plugins: [ new HtmlWebpackPlugin({ template: '...' }) ] }

---

代码质量管理及检测

执行

node node_modules/eslint/bin/eslint.js --init

​ 会在完成一系列问题后生成.eslintrc.js文件，但由于文件不会自动向下自动查找，所以需要输入如上所示的冗长的路径。

​ 另一种添加selink的方法是在json文件中添加命令，json存在向下查找机制，所以在scripts中添加

"eslint_init": "eslint --init"

运行

cnpm run eslint_init

选择如下

How would you like to use ESLint? · style √ What type of modules does your project use? · esm √ Which framework does your project use? · none √ Does your project use TypeScript? · No √ Where does your code run? · browser √ How would you like to define a style for your project? · guide √ Which style guide do you want to follow? · standard √ What format do you want your config file to be in? · JavaScript

---

完整配置

生成json
cnpm init -y 基本配置
cnpm i webpack webpack-cli webpack-dev-server css-loader style-loader postcss-loader autoprefixer less-loader less file-loader url-loader babel-loader @babel/core @babel/preset-env html-webpack-plugin eslint-loader stylelint stylelint-webpack-plugin stylelint-config-standard jest jest-webpack -D