webpack环境搭建

发布于 2020-03-20  191 次阅读


  1. 安装webpack:管理员权限打开终端(这里是全局安装哦)。
    npm install webpack -g
    
    • windows打开终端管理员权限的快捷方式:
      • 首先win + r 输入 cmd
      • 这时按住 ctrl + shift
      • 最后按回车。
    • npm下载速度慢解决方法:使用淘宝镜像
  2. 切入项目根目录,初始化项目(我的项目根目录是:D:\learningCase\web\webpack_demo\wp)。
    npm init
    
    • 文件夹结构:

      webpack_demo

  3. 在项目的根目录下安装webpack和webpack-cli(开发者使用,注意这里不是全局安装哦)。

    npm install webpack webpack-cli -D
    
    //-D表示开发者使用的环境
    //-S项目依赖环境
    //-g表示全局安装
    
  4. 在项目的根目录下安装webpack-dev-server(开发者使用,注意这里不是全局安装哦)用于实时打包。
    npm install webpack-dev-server -D
    
    • 在项目根目录下新建webpack.config.js文件,用来配置webpack打包环境(文件名不可以改)。
    • webpack打包前会先读取webpack.config.js配置文件,根据配置文件进行打包。
    • webpack四个核心概念:
      • entry:项目入口;
      • output:项目输出;
      • plugins:项目使用的插件;
      • module:项目需加载的loader。
    //webpack.config.js:配置webpack打包环境
    
    // 引入path包
    const path = require('path')
    
    //导出webpack配置环境
    module.exports={
    
        // entry项目入口
        // __dirname:当前文件运行环境绝对路径
        // 这里我们要打包的是src文件夹下的main.js文件
        entry: path.join(__dirname,'/src/main.js'),
    
        //output项目输出地
        output:{
            // path输出的位置
            // 打包后,生成文件的存放地址
            path:path.join(__dirname,'/src/dist/'),
    
            // filename:输出的文件名
            // 打包后生成文件的文件名
            filename:'bundle.js'
        }
    }
    
  5. webpack打包步骤:
    • 首先要明白:能够在终端直接输入的命令一定是全局安装的,所以第一步需要配置运行命令。
      • 在package.json文件下,找到script配置dev(名称可改)为运行webpack-dev-server的命令。
    {
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server"
      },
      "devDependencies": {
        "webpack": "^4.42.0",
        "webpack-cli": "^3.3.11",
        "webpack-dev-server": "^3.10.3"
      }
    }
    
    • 在项目根目录下运行webpack-dev-server就可以做到实时打包。
    npm run dev
    
    • 运行后会得到一个本机回连,这个本机回连对应的是项目根目录,这里是:http://localhost:8080/。
    d:\web\webpack_demo\wp>npm run dev
    
    > mywebpack@1.0.0 dev d:\web\webpack_demo\wp
    > webpack-dev-server
    
    i 「wds」: Project is running at http://localhost:8080/
    i 「wds」: webpack output is served from /
    i 「wds」: Content not from webpack is served from d:\web\webpack_demo\wp
    i 「wdm」: Hash: aa3c061d7f3acafb21ef
    Version: webpack 4.42.0
    Time: 426ms
    Built at: 2020-03-20 17:00:54
        Asset     Size  Chunks             Chunk Names
    bundle.js  671 KiB    main  [emitted]  main
    Entrypoint main = bundle.js
    
    • 运行后会在根目录(wp文件夹)的内存下打包出一个虚拟的js文件,即配置里的bundle.js文件。
    • 我们可以通过:http://localhost:8080/bundle.js 访问到这个文件。
    • 所以我们的前端页面可以通过直接访问内存里的虚拟js文件来达到相同的效果。
    <!-- 这里的前端页面是src文件夹下的index.html -->
    <script src="../bundle.js"></script>
    
    • 这样做的原因及好处:
      • 原因:当我们向服务器访问一个前端页面时,页面如果直接从服务器引入静态资源,如js、css、img等文件的话,那么这些静态并不会第一次加载。需要二次访问服务器,这样就会导致网页多次向后端发送请求,从而使网站变慢。
      • 好处:
        • 减少网页向服务器请求的次数。
        • 所有需要引入的js文件都可以先导入到main.js里面,通过打包一个main.js就可以直接使用。
        • 打包后会在内存里生成虚拟的bundle.js,这样访问会更快。
  6. webpack打包html文件
    • webpack本身不具备打包html文件的功能,所以我们要下载相关插件以及配置webpack.config.js。

    • 下载插件:在项目根目录下载html-webpack-plugin。

    npm install html-webpack-plugin -D
    
    • 使用这个插件前需配置webpack.config.js。
    const path = require('path')
    
    //引入html-webpack-plugin包
    const htmlWebpackPlugin = require("html-webpack-plugin")
    
    module.exports={
        entry: path.join(__dirname,'/src/main.js'),
        output:{
            path:path.join(__dirname,'/src/dist/'),
            filename:'bundle.js'
        },
        //数组形式,容纳更多的插件
        plugins:[
            new htmlWebpackPlugin({
                //template:需要打包的模板
                template:path.join(__dirname,'./src/index.html'),
                filename:'index.html'
            })
        ]
    }
    
    • 运行服务
    npm run dev
    
    • 运行后我们会发现:

      • 在项目根目录下的虚拟内存里生成了一个index.html文件。

      webpack_0

      • 这个index.html文件自动的将同样是在虚拟内存里的bundle.js引入。
      • 这与我们之前的引入造成重复,所以我们可以删除之前引入bundle.js的代码。

      webpack_1

      • webpack打包解决了错综复杂的依赖关系,把很多拖慢网页的引用打包成一个文件,然后自动结合虚拟内存里的html、js、css等文件,构成一个网站。
    • 配置自动打开网站及更改端口:
      • 找到package.json文件;
      • 在配置运行webpack命令那一行后面加上:--open --port 端口号 --contentBase 文件路径 --hot;
      • --hot表示热更新,相当于哪里改了更新哪里。不加会造成每次修改代码,整个环境重新编译一遍。
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server --open --port 5555 --contentBase ./ --hot"
      },
    
  7. 导入css样式:
    • 在main.js里面导入css文件。
    //导入path包
    import $ from 'jquery'
    
    //导入CSS文件
    import './css/style.css'
    
    console.log("http://lqxzd.site")
    $("div").css("background","pink")
    
    • 在根目录下安装css-loader和style-loader。
    npm install css-loader -D
    
    • 在webpack.config.js配置一个用来加载css的loader。
        //这部分添加在plugins的后面
        module:{
            //rules:匹配规则
            rules:[
                //test:要查找的东西,后面跟正则表达式
                //这里注意顺序:从后向前,匹配到的文件会先交给css-loader解析,解析完给style-loader加载
                {test: /\.css$/i,use:['style-loader','css-loader']}
            ]
        },
    
  8. 图片的打包
    • 在项目根目录下安装file-loader和url-loader。
      • file-loader的作用是:图片打包后是原先的文件,适用于打包文件较大的图片。
      • url-loader的作用是:将图片编译成base64字符串,且二次获取该图片时不需要再次访问服务器,适用于文件较小的图片。
    npm install file-loader -D
    npm install url-loader -D
    
    • 配置webpack.config.js。
    //在rules里添加
    //方法一:二选其一
    {test:/\.(jpg|png|bmp|gif|jpeg)$/i,use:['file-loader']},//表示原图加载
    {test:/\.(jpg|png|bmp|gif|jpeg)$/i,use:['url-loader']},//表示base64加载
    
    //方法二:限制法
    //给定大小(5kb=5120),小于等于时base64加载,大于时原图加载
    {test:/\.(jpg|png|bmp|gif|jpeg)$/i,use:['url-loader?limit=5120&name=[name][hash:6].[ext]']},
    //name=[name][hash:6].[ext]表示使用原来的文件名+6位哈希值作为文件名
    
    • 为什么要用名字+哈希值命名?
      • 保证文件名唯一,哈希值是唯一的。
      • 文件名重复会导致覆盖。
      • 哈希值太长所以取6位。
    • 在js中导入图片的方法
    import imgurl from  './img/f.jpg'
    const img=document.querySelector("img")
    img.setAttribute('src',imgurl)
    
  9. 下载babel环境
    • @babel/core:模块核心
    • babel-loader:加载器
    • @babel/preset-env:预设
    • @babel/runtime:环境
    • @babel/plugin-proposal-class-properties:转类名用
    • @babel/plugin-transform-runtime:插件运行环境
    • @babel/preset-env:预设环境
    npm install @babel/core -D
    npm install babel-loader -D
    npm install @babel/preset-env -D
    npm install @babel/runtime -D
    npm install @babel/plugin-proposal-class-properties -D
    npm install @babel/plugin-transform-runtime -D
    npm install @babel/preset-env -D
    
  10. 配置babel并使用babel将高级语法转ES5(兼容用)。
    • 在项目根目录下新建 .babelrc 文件,用来配置babel,我的项目根目录是:D:\web\webpack_demo\wp

      babelrc.png

    • 配置 .babelrc

    {
        "presets": ["@babel/preset-env"],
        "plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"]
    }
    
    • 配置webpack.config.js,babel是用来解析js的,所以需要配置解析js文件的匹配规则。
    //写在rules匹配规则里
    //exclude用来排除某个文件夹或者文件
    //node_modules里面的文件已经被编译过了,而且里面文件太多,所以我们要把node_modules里的文件排除
    { test: /\.js$/i, use: ['babel-loader'],exclude:/node_modules/},
    

没有肆意生长的野心,哪来梦想的星辰大海。