Webpack配置详解——这一篇就够用了

main:‘./src/js/app.js’

}

*/

output: { // 输出配置

filename: ‘./js/built.js’, // 输出文件名

path: resolve(__dirname, ‘build’) //输出文件路径配置

},

mode: ‘development’ //开发环境(二选一)

mode: ‘production’ //生产环境(二选一)

};

运行指令： webpack

打包less资源

=================================================================

概述：

less文件webpack不能解析，需要借助loader编译解析

创建less文件

• src/less/test1.less

• src/less/test2.less

• 入口app.js文件

• 引入less资源

• 安装loader

npm install css-loader style-loader less-loader less --save-dev

配置loader

{

test: /.less$/, // 检查文件是否以.less结尾（检查是否是less文件）

use: [ // 数组中loader执行是从下到上，从右到左顺序执行

‘style-loader’, // 创建style标签，添加上js中的css代码

‘css-loader’, // 将css以commonjs方式整合到js文件中

‘less-loader’ // 将less文件解析成css文件

]

},

运行指令： webpack

js语法检查

===============================================================

概述：

对js基本语法错误/隐患，进行提前检查

安装loader

• npm install eslint-loader eslint --save-dev

• 备注1：在：eslint.org网站 -> userGuide -> Configuring ESLint 查看如何配置

• 备注2：在：eslint.org网站 -> userGuide -> Rules 查看所有规则

配置loader

module: {

rules: [

{

test: /.js$/, //只检测js文件

exclude: /node_modules/, //排除node_modules文件夹

enforce: “pre”, //提前加载使用

use: { //使用eslint-loader解析

loader: “eslint-loader”

}

}

]

}

加粗样式

“eslintConfig”: {

“parserOptions”: {

“ecmaVersion”: 6, // 支持es6

“sourceType”: “module” // 使用es6模块化

},

“env”: { // 设置环境

“browser”: true, // 支持浏览器环境： 能够使用window上的全局变量

“node”: true // 支持服务器环境: 能够使用node上global的全局变量

},

“globals”: { // 声明使用的全局变量, 这样即使没有定义也不会报错了

“$”: “readonly” // $ 只读变量

},

“rules”: { // eslint检查的规则 0 忽略 1 警告 2 错误

“no-console”: 0, // 不检查console

“eqeqeq”: 2, // 用而不用=就报错

“no-alert”: 2 // 不能使用alert

},

“extends”: “eslint:recommended” // 使用eslint推荐的默认规则 https://cn.eslint.org/docs/rules/

},

运行指令： webpack

js语法转换

===============================================================

概述：

将浏览器不能识别的新语法转换成原来识别的旧语法，做浏览器兼容性处理

安装loader

npm install babel-loader @babel/core @babel/preset-env --save-dev

配置loader

module: {

rules: [

{

test: /.js$/,

exclude: /node_modules/,

use: {

loader: “babel-loader”,

options: {

presets: [‘@babel/preset-env’]

}

}

}

]

}

运行指令： webpack

js兼容性处理

=================&#