webpack的介绍及配置:
一、介绍:
Webpack可以看做是模块打包机,将html,js,css,图片等文件,做打包模块的操作,
能做什么:
1、对commonJs,AMD,ES6的语法做兼容,对js、css、图片等资源文件打包(适合团队开发)比如:我写一个js文件,他写一个js文件,合并比较麻烦,通过webpack合并就简单,有独立配置文件webpack.config.js
2、把浏览器不认识的js,sass,vue,等待代码,将其打包成为合适的格式供浏览器识别使用。
问:
vue脚手架工具 React脚手架工具为什么能直接使用sass,路由等等 就是因为底层做了webpack打包操作。
相关目录:
–src:代码开发目录,
–build:开发环境webpack编译打包输出目录,同样按照view、styles、js组织
–dist:生产环境webpack编译打包输出目录,同样按照view、styles、js组织
–node_modules:所以使用的nodeJs模块
–package.json: 项目配置
–webpack.config.js: 开发环境webpack配置
–webpack.production.config.js: 生产环境webpack配置
二、简单配置webpack:
前期配置:新建package.json页面,用来记录下载那些模块,在这个文件中配置npm run …
"scripts": {
"dev": "webpack --mode development --watch", //开发环境使用,watch监听修改,一旦修改就会自动更新。(npm run dev)
"build": "webpack --mode production", //生产环境使用,也就是上线打包 (npm run build)
"start": "webpack-dev-server --mode development"//保存后浏览器自动更新(npm run start)
},
1、npm 下载webpack和webpack-cil
安装:npm install webpack webpack‐cli ‐‐save‐dev(局部安装)
注:默认入口是src/index.js
(告诉webpack从哪里开始,并依赖关系图确定需要打包的文件内容)
出口是dist/main.js
(告诉webpack打包好后放入哪里)
2、入口与出口及单页面与多页面:
a、在页面新建webpack.config.js文件 做配置。
b、代码运行之后找到这个文件,如果有就执行webpack.config.js里的配置的入口和出口,如果没有就执行默认的src入口,生成到dist文件(出口),
webpack.config.js文件夹:
module.exports = {
// 配置入口
entry : {
// 语法:key : value
key文件名
value:入口文件地址
a : __dirname+ '/src/index2 .js / ' //地址,要配置哪个文件 可以有多个
b : __dirname+ '/src/index2 .js / '
},
//配置出口,
output: {
path: __dirname+ '/dist', //要生成配置的出口文件,配置到哪里
filename: "[name ]. js" // 生成文件的文件名,[name] 就使用上面默认的 a和b
publicPath:'/dist’//执行代码后生成虚拟dist/a 和b.js目录 我们看到不到,但是存在,所以才能执行相关的打包后的操作
}
}
2.1、webpack-plugin插件:
作用:将js
插入到public文件夹里面的index.html
文件里,然后就可以直接打开这个文件在页面上显示。
2.2、clean-webpack-plugin插件:
作用:再次打包的时候,上次打包的代码还遗留下来,可能出现问题,所以每次打包的时候就清楚上一次的dist文件。就用这个插件
注:(使用方法需要去官方文档看,webpack文档有问题!)
3、保存浏览器实时刷新,webpack-dev-serve
安装:npm install webpack-dev-server
配置代码:
在package.json 配置 state: "webpack-dev-server --mode development"
配置在webpack.config.js
文件夹:
devServe: {
contentBase: './' 以当前目录为根目录(localhost:8080)
port: ' 8080’//端口号
inlin : true // 实时刷新
}
注:不会执行这个命令后不会生成dist文件,但是会生成虚拟dist目录
4、source-map 生成映射文件,映射源代码目录
作用:当打包后,配置这个文件就 可以很轻松查找到报错信息,映射除源代码中的错误信息。
配置在webpack.config.js
文件夹:
devtool:"source-map", //生成映射文件, 映射源代码目录
注:上线时就不需要,只供开发使用。
5、loaders配置:
处理浏览器不认识的语法,和兼容性问题。
分为:1、css——loaders style——loaders 将css文件当成模板处理
3、scss ——loaders (同时安装node-sass)编译scss生成css文件
4、vue——loadersvue-template-compiler 编译vue文件
5、file——loaders url-loader 文件copy到目标文件夹
6、post-csss postcss-loader autoprefixer postcs 处理css兼容问题
a、 css——loaders style——loaders
安装:npm i css-loader style-loade --save-dev
为什么要配置这两个loader?:
用来处理scc和style 在模块中引入能使用(js通过require引入时使用)
require("./css/index.scss") // webpack只识别 js模块,css-loader style-loader (把css当成模块来处理)
// commonJS 规范 导入了一个模块
代码配置
配置在webpack.config.js文件夹:
module: { //固定写法
rules: [ //固定写法,下面开始配置各种loader
{
// 配置style和css模块
test: /\.css$/, //1、正则匹配以.css结尾的
// loader: 'style-loader!css-loader' //2、添加对样式表的处理,内联样式,从右到左读取
loader: 'style-loader!css-loader!postcss-loader'
},
b、解决css的兼容性问题:
有的css不兼容低版本浏览器,如:display: flex ,对他们做兼容操作。
安装:npm i postcss-loader autoprefixer postcss
代码配置:(新建一个postcss.config.js配置文件)、配置完成之后,需要在css和scss中添加一个配置 postcss-loader
配置在postcss.config.js文件夹:
module.exports = {
plugins: [
// require('autoprefixer')('last 100 versions' )
require('autoprefixer')(
{ overrideBrowserslist:
[ //兼容相关浏览器的版本号
'last 10 Chrome versions',
'last 5 Firefox versions',
'Safari >= 6',
'ie> 8',
'iOS >= 8',
'Android >= 4.4'
]
}
)
]
}
c、scss编译成css文件,让他支持sass语法:
webpack支持sass语法
安装:mpm i sass-loader node-sass --save-dev
(必需要安装node-sass)
代码配置:
配置在webpack.config.js文件夹:
{
test: /\.scss$/, 找到.scss结尾的
// loader: 'style-loader!css-loader!sass-loader'
loader:'style-loader!css-loader!postcss-loader!sass-loader' //添加对样式表的处理,内联样式,postcss-loader是兼容css的操作
},
d、babel——loaders 将es6代码转换成es5代码,提升语法的兼容性:
例:箭头函数支持高本版浏览器,让他兼容低版本浏览器就这用这个方法
安装:npm i babel-loader@7 babel-core babel-presetes2015 --save-dev
代码配置:
配置在webpack.config.js文件夹:
{
test: /\.js$/, //随便起的test 名字
exclude: /node_modules/, //排除一个
// exclude: /(node_modules|src)/, //*****排除多个怎么写???
loader: 'babel-loader',
query: {
presets: ['es2015'] //转成es5语法
}
},
e、vue——loaders 配置vue模块
让普通代码拥有写vue的能力,打包后生成vue模块。
安装:npm i vue-loader vue-template-compiler --save-dev
配置代码:
配置在webpack.config.js文件夹:
var {VueLoaderPlugin} = require("vue-loader") // {VueLoaderPlugin:function(){ //拿出插件支持
module.exports = {
module: {
rules: [
{ test: /\.vue$/, use: 'vue-loader' } // 处理 .vue 文件的 loader
]
},
plugins:[
//vue 编译需要插件的支持
new VueLoaderPlugin()
]
}
index.js文件中
//初始化vue
new Vue({
render:h=>h(App) // App 是kerwin自己创建的根组件
}).$mount("#app")
九、集成eslint代码检测工具:
1、安装:
npm install eslint-loader --save-dev
npm install eslint --save-dev
2、
配置webpack.conifg.js
注:代码检测必需在babel编译成es5之前检测,所以加上nforce: "pre"
这行代码
config.module.rules.push({
test: /\.js$/,
exclude: /node_modules/,
use: ['eslint-loader'],
enforce: 'pre' /**/在babel编译之间进行代码检测
})
2.1、让报错显示在浏览器,而不是控制台加上,在devServer里面加上overlay:{errors: true }
config.devServer = {
port: 8000,
contentBase: path.resolve(__dirname, './public'),
open: true,
hot: true, // 开启热更新
overlay: { /**/ 报错时的浮层到浏览器上面来,而不是在控制台**
errors: true
}
}
3、在根目录新建eslintrc.js文件
{
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"semi": 0, /**/ **为0的时候表示不需要分号结尾,为1的时候表示必需要分号结尾**
}
}
`注`:semi 想及相关配置 ,0表示取消设置——1表示警告——2表示弹出报错
error是弹出报错——off是取消当前设置
十、集成react
流程:
1、安装:
cnpm install react -S //定义组件
cnpm install react-dom -S //渲染DOM
2、在src目录下新建App.js写相关的react代码:
import React from 'React' //引入react核心
export default class App extends Component{
constructor(props) {
super(props)
}
render() {
return(
<div>
<h1>你哈</h1>
</div>
)
}
}
2.1、然后在min.js入口js文件引入这个App.js组件,会报jsx错不能识别,需要下载jsx插件识别这个语法。babel官网配置中找到 react和env
1、安装:
react识别jsx规则的插件:——npm install --save-dev @babel/preset-react
env最新的es6转es5的规则:——npm install --save-dev @babel/preset-env
然后配置:
在项目根目录下新建.babelrc.json
文件夹
{
"presets": ["@babel/preset-react", "@babel/preset-env"]
}
//react中的jsx规则和较新的js转es5语法