0
点赞
收藏
分享

微信扫一扫

01---webpack的基础篇

胡桑_b06e 04-04 10:00 阅读 4
01 为什么需要webpack构建工具?
需要转化ES6及以上的语法,因为低版本浏览器不支持ES6及以上的语法

需要转化jsx的语法等

需要补齐css的前缀,因为不同浏览器对于css样式的兼容不同需要加前缀,以及预处理器。

压缩混淆,压缩代码 图片等。

02 初始webpack:配置文件的名称
webpack默认的配置文件是 webpack.config.js文件

可以通过webpack --config 指定配置文件

        

03 webpack的配置组成
module.exports = {
        
                entry:'./src/index.js',   @1 打包的入口文件

                output:'./dist/main.js',  @2 打包的出口文件

                mode:'production',      @3 环境

                module:{

                        rules:[ {test:/\.txt$/, use:'raw-loader'} ]  @4 解析的loader
                },

                plugins:[    @5 插件配置
                        
                        new HtmlwebpackPlugin({  

                                template:'/src/index.html'
                        })
                ]
}

04 webpack环境的安装
第一步 打开终端安装nvm:通过curl安装执行命令如下:

       curl -o- https://raw.githubusercontent.com/nvm/v0.34.0/install.sh | bash

第二步 将nvm添加到环境变量中去:执行如下的代码

       soure ~/.bash_profile

第三步 检测nvm是否安装成功:执行如下命令

       nvm list 可以查看到已经安装的node的版本

第四步 安装node.js:执行如下的代码

       nvm install v10.15.3 ; 对应的node.js的版本号;

   05 创建初始的项目并按照webpack和webpack-cli;
终端执行:mkdir mv-project;  创建了mv-project的目录

进入目录:cd mv-project

初始化项目: npm init -y

安装webpack和webpack-cli: npm install webpack webpack-cli --save-dev

查看webpack安装的版本终端中执行: ./node_modules/.bin/webpack -v

上面的代码相当于在执行webpack这个打包工具。

06 简单的列子来看webpack的打包流程:

  第一步 创建webpack.config.js配置文件及相关脚本
const path = require('path')

module.exports = {

    mode:'production',

    entry:'./src/index.js',

    output:{

        path:path.resolve(__dirname,'dist'),


        filename:'bundle.js'
    }

}

  第二步 需要在项目的跟目录下创建src目录以及index.js,hello.js文件

   hello.js文件代码如下:

export const hello = ()=>{

    return  'hello webpack'

}

   index.js文件的代码如下:

import {hello} from './hello.js'

document.write(hello())

console.log(hello())

第三步 执行打包的命令:在终端中执行如下命令:

./node_modules/.bin/webpack

 第四步 打包的结果 会在项目的根目录中创建一个dist目录并有一个bundle.js文件

 同时需要创建index.html文件导入webpack打包生成的dist目录下的bundle.js的文件

<HTML>

    <head>

        <body>

            <script src='./dist/bundle.js'></scrit>
        
        </body>
        
    </head>

</Html>
07 简化./node_modules/bin/webpack打包的命令:通过npm run build进行打包
在package.json文件中:scripts对象中创建执行webpack脚本的命令:

原理:模板局部安装会在node_modules/.bin目录下创建软连接

{
  "name": "vue2code",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "build": "webpack",
  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "dependencies": {
       
  }
}

        

举报
0 条评论