Webpack

最新推荐文章于 2024-09-22 09:38:42 发布

海贼王0101

最新推荐文章于 2024-09-22 09:38:42 发布

阅读量117

点赞数 1

文章标签： node.js javascript vue.js webpack

本文链接：https://blog.csdn.net/zhao_li_ming/article/details/120770640

版权

1.webpack?

    Webpack4以上的版本要安装webpack-cli
    1.什么是webpack：webpack是一个现代javascript应用程序的模块打包器,分析你的项目结构,找到javascript模块以及其他的一些浏览器不能直接直接运行的拓展语言,并将其转换和打包为合适的格式工浏览器使用,把浏览器不能识别的文件转换成浏览器能识别的文件,webpack 是前端项目的构建工具；前端的项目，都是基于 webpack 进行 构建和运行的；
    2.什么项目适合使用webpack：
        webpack 非常适合与单页面应用程序结合使用；
        不太适合与多页面的普通网站结合使用；
    3.为什么要使用webpack: 
        如果项目使用 webpack 进行构建，我们可以书写高级的ES代码，且不用考虑兼容性；
        webpack 能够优化项目的性能；
        基于webpack，程序员可以把 自己的开发重心，放到功能上；
        webpack把浏览器不能识别的文件进行打包合并成浏览器不能识别的文件
        1.把多个文件合并成一个文件,使用,打包的是一个入口文件,入口文件已经引入了好多文件
        2.把浏览器不能识别的文件转换成浏览器能识别的文件,

2.网页中引入的静态资源多了以后有什么问题？

    a. 对网页性能不友好：要发起很多的静态资源请求，降低页面的加载效率，用户体验差；
    b. 对程序开发不友好：前端程序员要处理复杂的文件之间的依赖关系；
如何解决上述两个问题
    a. 对于 JS 文件 或 CSS 文件，可以合并和压缩；小图片适合转 Base64 格式的编码；
    b. 通过一些工具，让工具自动维护文件之间的依赖关系；

3.webpack-cli

使用命令：webpack 输入文件路径 打包后文件路径将一个文件打包成另外一个文件

4.在项目中安装和配置webpack

    webpack 就是前端的一个工具，这个工具，已经被托管到了NPM官网上；
    a. 新建一个项目的空白目录，并在在终端中，cd到项目的根目录，执行npm init -y 初始化项目
    b. 装包：运行 cnpm i webpack webpack-cli -D 安装项目构建所需要的 webpack
    c. 打开 package.json文件，在 scripts 节点中，新增一个 dev 的节点：

              "scripts": {
                     "test": "echo \"Error: no test specified\" && exit 1",
                     "dev": "webpack"
          },

    d. 在项目根目录中，新建一个 webpack.config.js 配置文件，内容如下：

    // 这是 使用 Node 语法， 向外导出一个 配置对象

   module.exports = {
          mode: 'production' // production    development
     }
    e. 在项目根目录中，新增一个 src 目录，并，在 src 目录中，新建一个 index.js 文件，作为 webpack 构建的入口；
    f. 在终端中，直接运行 npm run dev 启动webpack进行项目构建；

思路:当在命令行输入npm run dev,webpack就被run 起来了,它会先检查有没有webpack.config.js文件,如果有,就去执行这个文件,,文件里面有一个对象,根据这个配置文件进行相应的打包,生成dist文件,还有下面的main.js文件
    //这是使用node语法,向外导出一个配置对象
    module.exports={
    mode:"production"//生产环境,运行环境
    //development开发环境,不会压缩代码
    }
注意:webpack从4.x版本开始,提供了一些默认的约定:
    1.如果程序员在webpack.config.js这个配置文件中,没有提供entry入口文件,则webpack默认去打包src目录下的index.js文件
    2.如果程序员没有在配置文件,提供output输入选项,则webpack默认,会把打包构建好的代码文件,放到dist目录下的main.js文件中

1.需要对src下面的哪个文件进行打包,就在webpack.config.js文件中使用entry指定打包的入口文件,
2.要把打包好的文件放到哪里,就要在webpack.config.js文件中使用output输出的配置对象,并指定输出的文件名称

5.webpack-config

1.先创建一个webpack-config的文件,在里面配置webpack.config.js和index.html平级
2.运行webpack,就会生成一个dist文件,dist文件里面有一个bundle.js文件,这就是打包后的文件
    var path = require('path')
    
    module.exports = {
          // 入口文件配置
          entry: "./src/app.js",
        
          // 出口文件配置项
          output: {
            // 输出的路径，webpack2起就规定必须是绝对路径
            path: path.join(__dirname, 'dist'),
            // 输出文件名字
            filename: "bundle.js"
          }
    }
3.在inden.html文件中引入bundle.js
    
4.在命令行运行webpack就可以了,,打开浏览器,,修改一次值,就要运行一次webpack再打开浏览器

6.webpack-dev-server

webpack-dev-server作用:实时监听代码的改变,实时打包构建,自动帮我们打包并刷新浏览器,但是,它打包好的main.js并不会直接存放到物理磁盘 src->main.js中,而是托管到了内存中,大家可以认为,在项目根目录中,有一个看不见的main.js文件

1. 运行：npm init -y
2. 运行：npm i webpack-dev-server@2.9.7 webpack@3.11.0 -D
      var path = require('path')
    
     module.exports = {
           // 入口文件配置
           entry: "./src/app.js",
        
           // 输出配置
           output: {
             // 输出的路径
             path: path.join(__dirname, 'dist'),
             // 静态资源在服务器上运行时的访问路径，可以直接http://localhost:8080/dist/bundle.js访问到服务器中的bundle.js文件
             publicPath: '/dist',
             // 输出文件名字
             filename: "bundle.js"
           }
    }
3. index.html中修改 <script src="/dist/bundle.js"></script>
4. 运行：webpack-dev-server
5. 运行：webpack-dev-server --inline(支持hash#值) --hot --open --port 8090

6. 配置script："dev": "webpack-dev-server --inline --hot --open --port 8090"配置脚本
7. npm run dev跑配置的脚本,以后再修改值,保存后直接刷新浏览器,不用再运行命令

7.webpack-css

Css-loader可以解析js入口文件中的css文件

1.安装npm install css-loader style-loader --save-dev
2.在根目录下创建一个styles文件夹,在这个文件里面创建a.css文件,并在a.css文件写一点样式,在入口文件app.js中引入a.css文件
    require("../styles/a.css")
2.在webpack.config.js文件中加入模块打包器
        
          module: { //模块打包器
            rules: [
           8   // 配置的是用来解析.css文件的loader(style-loader和css-loader)
              {
                // 1.0 用正则匹配当前访问的文件的后缀名是  .css
                test: /\.css$/,
                use: ['style-loader', 'css-loader'] //webpack底层调用这些包的顺序是从右到左
              }
            ]
          }

8.webpack-less&webpack-sass

1.安装npm install less less-loader sass-loader node-sass --save-dev
2.在根目录下的styles文件夹里面创建b.less和c.scss文件,这两个文件都写一些样式,在入口文件app.js中引入b.less和c.scss文件
    require("../styles/b.less")
    require("../styles/c.scss")
3.在webpack.config.js文件的module的rules中加入模块打包器
    {
        test: /\.less$/,
        use: [{
            loader: 'style-loader'
        }, {
            loader: 'css-loader'
        }, {
            loader: 'less-loader'
        }]
    },
    
    {
        test: /\.scss$/,
        use: [{
            loader: 'style-loader'
        }, {
            loader: 'css-loader'
        }, {
            loader: 'sass-loader'
        }]
    }

9.webpack-图片&字体

1.图片
    1.安装npm install file-loader url-loader --save-dev
    2.在跟目录下创建img文件,里面放好图片
    3.在a.css文件中使用图片


        之前引好的文件
        
        
    4.webpack.config.js文件的module的rules中加入模块打包器
        
            {
               test: /\.(png|jpg|gif)/,
               use: [{
                   loader: 'url-loader',//默认以base64处理图片
                   options: {
                     // limit表示如果图片大于50000byte，就以路径形式展示file-loader，//小于的话就用base64格式展示,url-loader
                       limit: 50000
                   }
               }]
            }
2.字体
    1.在icomoon上下载好字体包,解压,将fonts文件夹放在根目录下,将style.css文件放在styles文件下
    
    2.在styles文件下的style.css文件中在设置如下
     
    3.在字体图片页面中,点击getcode会出现代码,将代码粘贴至index.html文件
        
    4.在src文件下的app.js文件中,引入style.css文件
        
    5.在webpack.config.js文件的module的rules的图片和字体图标部分,在test中加入fonts中文件的后缀名
        
    6.运行npm run dev命令就可以了

10.webpack-html

在html中自动引入打包好的js文件,不用在Html中引入,如果打包的js文件名改变,输出文件output中的filename把打包好的js文件名改变,也会自动生成改变,不用手动改

1. 注意需要注释掉publicPath，不然会冲突
    
2.在webpack.config.js文件中引入插件
    var HtmlWebpackPlugin = require('html-webpack-plugin')
    
3.在webpack.config.js文件的output中写入
    根据template.html生成一个index.html文件,在内存中,所以看不到index.html
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'template.html'
        })
    ]
    
4.将index.html重命名为template.html
5.在template.html中删除引入的打包好的js文件'
    
    
    
6.在template.html的title中,添加<%= htmlWebpackPlugin.options.title %>
    
7.在webpack.config.js文件中的pligins中设置title,会出现下图效果

11.webpack-babel

处理ES6语法浏览器不能解析的问题

1.在src的calc.js的文件中写ES6语法代码
    
2.在src文件下的app.js中引入calc.js文件
    
3.在webpack.config.js文件中的module中rules中引入,删掉options的代码
    
4.在根目录下 新建.babelrc文件,写入

12.webpack-vue,结合webpack处理单文件组件

1.从第5天拷贝webpack-babel,,文件名改为webpack-vue
    
    
    
2.安装配置webpack相关loader
    1. 已经从第5天的node_modules中全部拷过来,这里面所有包都有,有一个老师发的包,全部包都有,都下载好了,在老师发的资料里面
    2. npm install vue --save
    3. npm install vue-loader vue-template-compiler --save-dev
    
3.创建一个components文件夹,在这个文件夹中创建App.vue文件创建vue组件
    
    <!-- App.vue -->
        <template>
              <div>{{msg}}</div>
            </template>
        <script>
            export default {
              data () {
                return {
                  msg: 'hello world'
                }
              }
            }
        </script>
        <style>
              div {
                color: red;
              }
        </style>
    
4.在根目录下创建app.js文件,用来引入App.vue组件,并将组件渲染到页面
    
        // app.js
        import Vue from 'vue'
        import App from './App.vue'
        
        new Vue({
            el: '#app',
            render: h=> h(App)
        })
    

5.在template.html文件中删除之前的代码,写入以下代码
    
6.在webpack.config.js文件的module的rules中写入以下代码,module用来挂载模块
    
    
    
7.修改webpack.config.js文件中的入口文件
    
8.webpack.config.js完整代码
    
    var path=require("path")
    var HtmlWebpackPlugin = require('html-webpack-plugin')
    module.exports={
    //配置入口文件
    entry:'./app.js',
    //配置输出文件
    output:{
    path:path.join(__dirname,"dist"),
    // 静态资源在服务器上运行时的访问路径，可以直接http://localhost:8080/dist/bundle.js
    //访问到服务器中的bundle.js文件
    // publicPath: '/dist',
    //表示输出文件的名字
    filename:'bundle.js'
    },
    module: {
    rules: [
    // 配置的是用来解析.css文件的loader(style-loader和css-loader)
    {
    // 1.0 用正则匹配当前访问的文件的后缀名是 .css
    test: /\.css$/,
    use: ['style-loader', 'css-loader'] //webpack底层调用这些包的顺序是从右到左
    },
    {
    test: /\.less$/,
    use: [{
    loader: 'style-loader'
    }, {
    loader: 'css-loader'
    }, {
    loader: 'less-loader'
    }]
    },
    {
    test: /\.scss$/,
    use: [{
    loader: 'style-loader'
    }, {
    loader: 'css-loader'
    }, {
    loader: 'sass-loader'
    }]
    },
    {
    test: /\.(png|jpg|gif|eot|svg|ttf|woff)/,
    use: [{
    loader: 'url-loader',//默认以base64处理图片
    options: {
    // limit表示如果图片大于50000byte，就以路径形式展示file-loader，
    //小于的话就用base64格式展示,url-loader
    limit: 50000
    }
    }]
    },
    {
    test: /\.js$/,
    // Webpack2建议尽量避免exclude，更倾向于使用include
    // exclude: /(node_modules)/, // node_modules下面的.js文件会被排除
    include: [path.resolve(__dirname, 'src')],
    use: {
    loader: 'babel-loader',
    // options里面的东西可以放到.babelrc文件中去
    // options: {
    // presets: ['env']
    // }
    }
    },
    {
    test: /\.vue$/,
    loader: 'vue-loader'
    }
    ]
    }, 
    plugins: [
    new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'template.html',
    title:'html-webpack-plugin'
    })
    ]
    }

13.webpack-router

1.安装路由npm install vue-router --save
2.在components文件中新建Login.vue文件,在文件中写入模板,样式
    
3.在app.js中设置路由
    1.思路步骤
        1.引入vue-router路由
        2.启用路由插件
        3.创建路由对象,配置路由规则
        4.引入路由组件,在components的Login.vue文件中
        5.注入router路由对象,挂载路由
        6.给组件挖坑,在在components的App.vue文件中通过router-view挖坑,路径匹配到的组件都会渲染在这里,会随path路径的变化,显示不同的组件
            
        7.在Login.vue文件中的样式style上设置scoped让样式变为组件内部使用的局部样式
                
    2.代码
        
    
        
        import Vue from "vue"
        import App from "./components/App.vue"
        //4.引入路由组件,在components的Login.vue文件中
        import Login from "./components/Login.vue"
        //1.引入vue-router路由
        import VueRouter from "vue-router"
        //2.启用路由插件
        Vue.use(VueRouter)
        //3.创建路由对象,配置路由规则
        var router=new VueRouter({
        routes:[
        {name:"Login",path:"/login",component:Login}
        ]
        })
        new Vue({
        el:"#app",
        //render将组建渲染到页面中去
        // render:function(h){
        // //h表示要渲染的组件
        // return h(App)
        // }
        //5.注入router路由对象,挂载路由
        router,
        render:h => h(App)
        })