Webpack(开发模式)

npm i nrm -g 全局安装nrm 包
通过nrm ls查看当前所有可用的镜像源地址以及当前所使用的镜像地址:
使用nrm use npm或nrm use taobao切换不同镜像源
解析渲染标签的时候会多次发送二次请求拖慢响应速度。
处理错综复杂的依赖关系。
使用cnpm的获取镜像
输入以下命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
输入cnpm -v输入是否正常
修改npm的资源镜像链接
npm config set registry http://registry.npm.taobao.org
在项目中:npm init -y  初始化npm管理
cnpm install webpack -g  全局安装
cnpm install webpack --save-dev   安装到项目中
cnpm install webpack-cli  -g
cnpm install webpack-cli --save-dev
//cnpm install webpack-cli -g
安装Jquery
cnpm i jquery -s  
不推荐在html中引用这些
可以在main.js(index.js)入口文件中引用  
import $ from 'jquery'(ES6) 相当于 const $ = require('jquery')
把文件给webpack处理
webpack .\src\js\main.js .\dist\bundle.js (语法已经过时) 4.0之后不可以
ERROR in multi ./src/js/index.js ./dist/bundle.js
Module not found: Error: Can't resolve '.\dist\bundle.js' in 'D:\phpStudy\PHPTutorial\WWW'
 @ multi ./src/js/main.js ./dist/bundle.js main[1]
webpack .\src\js\main.js -o .\dist\bundle.js 
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
webpack .\src\js\main.js -o .\dist\bundle.js --mode development
ok 完事儿
webpack能解决JS文件互相依赖关系。
能够解决兼容性问题,ES6语法也能识别,将高级语法转成低级语法
手动创建webpack.config.js     地址:https://www.webpackjs.com/concepts/
放在项目根目录即可
const path = require('path');


module.exports = {
    mode: 'development',
    entry: path.join(__dirname,'./src/js/main.js'), //入口,表示要打包哪个文件
    output:{
        path:path.join(__dirname,'./dist'),   //输出文件目录
        filename:'bundle.js'
    }
  }
webpack自动打包编译
webpack-dev-server这个工具,来实现自动打包编译
cnpm install webpack-dev-server -D 安装到项目本地开发依赖
执行方法和webpack类似,但是是安装在项目中,所以无法当成脚本命令
可以在package.json的scripts中配置:
"dev" : "webpack-dev-server"
然后通过 npm run dev执行  注意webpack和webpack-cli都得在项目中安装一下
托管在了http://localhost:8080/

ctrl+c键终止批命令
<script src="./../dist/bundle.js"></script>需要改成
<script src="bundle.js"></script>  在根目录中是虚拟的存在

打包生成的bundle.js没有实际存储在物理磁盘上,而是托管到了电脑内存中,所以是找不到的。
自动打包完成后打开浏览器:
scripts:中设置 "dev" : "webpack-dev-server --open"
"dev": "webpack-dev-server --open --port 3000 (--contentBase src 可选以src作为根路径打开首页) --hot局部更新"  而且可以无刷新重载
也可以用另一种方式:在webpack.config.js中
const webpack = require('webpack')
添加devServer:{
   open:true,  //自动打开浏览器
   port:3000,
   contentBase:'src', //指定托管的根目录
   hot:true
},
plugins:[//配置插件的节点
   new webpack.HotModuleReplacementPlugin()  //new一个热更新模块
]
想把页面也放进内存中需要一个插件:html-webpack-plugin 
cnpm i html-webpack-plugin -D   
安装之后在webpack.config.js中导入插件
const htmlWebpackPlugin = require('html-webpack-plugin')
也放进plugins节点里面
plugins:[new htmlWebpackPlugin({
    favicon: path.join(__dirname,'./src/img/favicon.ico'),      //图标
    template:path.join(__dirname,'./src/index.html'),  //指定模板页面,将来会 
    根据指定页面的路径去生成内存中的页面
    filename:'index.html' //指定生成的页面的名称
})
]
当使用了这个插件之后,我们不需要手动处理bundle.js的引用路径了,因为这个插件已经帮助我们自动追加了一个合适的script标签引用
CSS会发起二次请求,同样不推荐直接在页面引用
同样在main.js中导入css样式:
import './css/index.css'
报错:
ERROR in ./css/index.css 1:2
Module parse failed: Unexpected token (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

webpack默认只能打包js类型的文件,无法处理其他非js类型的文件
如果要处理js类型的文件,我们需要手动安装一些合适的第三方loader加载器
如果打包css,需要安装style-loader和css-loader
1
cnpm install style-loader css-loader -D
2
打开webpack.config.js 这个配置文件,在里面新增一个配置节点,叫做module,它是一个对象,在这个module对象上,有一个rules属性,这个rules是一个数组,存放了所有第三方文件的匹配和处理规则。
module:{
    rules:[
        {test:/\.css$/,use:['style-loader','css-loader']} //配置处理.css文件的第三方loader规则
    ]
}//用于配置所有第三方模块加载器
loader调用use中是从右到左运行:use:['style-loader','css-loader']
配置less的loader:
cnpm install less -D
cnpm install less-loader -D
新建规则:
{test:/\.less$/,use:['style-loader','css-loader','less-loader']}
配置sass的loader:
cnpm install sass -D
cnpm install sass-loader -D
新建规则:
{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
默认情况下webpack无法处理url地址,不管是图片还是字体库
cnpm install file-loader -D
cnpm install url-loader -D
 {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=100&name=[hash:8]-[name].[ext]'},
 第二种// {test: /\.(png|jpe?g|gif|svg|bmp)(\?.*)?$/,loader: 'url-loader',options: {limit: 100,name:'./src/img/[name].[hash:8].[ext]',}}  //处理图片路径的loader,如果引用的图片小于100bytes则会转为base64
处理字体图标
cnpm install popper -s
cnpm install bootstrap -s
import 'bootstrap/dist/css/bootstrap.css'  //node_modules里面的包名第一个目录可以直接写
{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},  //处理字体文件
在webpack中只能处理一部分ES6语法
需要借助于loader: 两套语法  尽量用npm下载babel 新版的要用@babel
cnpm install @babel/core -D
cnpm install babel-loader -D
cnpm install @babel/plugin-transform-runtime -D
cnpm install @babel/preset-env -D
cnpm install @babel/preset-react -D
cnpm install @babel/preset-stage-0 -D
cnpm install babel-preset-mobx -D
打开webpack配置文件中,在rules中添加新的匹配规则:
{ test: /\.js|jsx$/, use:'babel-loader',exclude: /node_modules/ }, 
//不要转换node_modules里面的js
在项目的根目录中新建一个.babelrc的配置文件,json格式
在babelrc中写:
{
 "presets":["@babel/preset-env","@babel/preset-react","@babel/preset-stage-0","mobx"],
 "plugins":["@babel/plugin-transform-runtime"]
}

babel-loader 8.x对应babel-core 7.x
babel-loader 7.x对应babel-core 6.x

额外补充
const MiniCssExtractPlugin = require("mini-css-extract-plugin");        //提取成单个css文件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');      //压缩css插件

下面是我配好的完整版文件

webpack.config.js

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");        //提取成单个css文件
// const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');      //压缩css插件


module.exports = {
    mode: 'development',
    entry: path.join(__dirname,'./src/js/main.js'), //入口,表示要打包哪个文件
    output:{
        path:path.join(__dirname,'./dist'),   //输出文件目录
        filename:'bundle.js'
    },
    plugins:[new htmlWebpackPlugin({
        // favicon: path.join(__dirname,'./src/img/favicon.ico'), //图标
        template:path.join(__dirname,'./src/index.html'),  //指定模板页面,将来会根据指定页面的路径去生成内存中的页面
        filename:'index.html', //指定生成的页面的名称
    }),       
    // new HtmlWebpackPlugin(//打包第二个页面
    //     {
    //         template: './app/src/page/index2.html',
    //         filename:'./page/index2.html'
    //     }),
    new MiniCssExtractPlugin({
        filename: "./src/css/[name].[hash:8].css"
    }),
    // new OptimizeCssAssetsPlugin(),      //压缩css文件
    new CleanWebpackPlugin(),   //清除dist
    ],
    module:{
        rules:[
            {test: /\.js|jsx$/, use:{loader:'babel-loader',options:{presets: ['@babel/preset-env','@babel/preset-react']}},exclude: /node_modules/},
            {test:/\.css$/,use:['style-loader','css-loader']}, //配置处理.css文件的第三方loader规则
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},//配置.less文件的第三方loader
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            // {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=100&name=[hash:8]-[name].[ext]'},
            {test: /\.(png|jpe?g|gif|svg|bmp)(\?.*)?$/,loader: 'url-loader',options: {limit: 100,name:'./images/[name].[hash:8].[ext]',}} , //处理图片路径的loader,如果引用的图片小于xxbytes则会转为base64
            {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},  //处理字体文件
        ]
    }//用于配置所有第三方模块加载器
  }

.babelrc.json

{
    "presets":["@babel/preset-env","@babel/preset-react","@babel/preset-stage-0","mobx"],
    "plugins":["@babel/plugin-transform-runtime"]
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注