淘先锋技术网

首页 1 2 3 4 5 6 7

一、webpack是什么?

webpack是前端的静态资源打包工具,能让浏览器支持模块化,将这些模块按照指定的规则生成对应的静态资源。【浏览器不支持模块化,通过webpack转化成浏览器可以识别的页面】

二、集成的工具

1.babel:es6->es5。

2.http服务,将前端的项目部署到集成的webpack的服务器上,就能直接启动了。

3.集成热模块加载,修改某一个文件(比如html)时,不需要刷新页面。

三、打包配置文件

webpack本身只能处理JavaScript模块,如果要处理其他类型的文件,就需要结合插件来使用,这些插件在webpack中被称为Loader(加载器)来进行转换。

Loader可以理解为模块和资源的转换器,它本身是一个函数,参数接受的是源文件,返回值是转换后的结果。这样我们就可以通过require或import来加载任何类型的模块文件,比如css,图片。

创建文件:webpack.config.js进行配置

const path = require("path")
//引入插件
const Htmlwebpackplugin = require("html-webpack-plugin")
const {VueLoaderPlugin} = require('vue-loader')
const webpack = require("webpack")
module.exports = {
    //开发模式,对应的还有production,none,不写这一句话终端会报警告
    mode:"development",
    //入口
    entry:"./src/main.js",
    //出口,绝对路径,文件名称
    output:{
        path:path.join(__dirname,"./dist/"),
        filename:"bundle.js"
    },
    //配置插件
    plugins:[
        new Htmlwebpackplugin({
            //指定模板,将index.html打包到bundle.js所在目录中
            template:"index.html"
        }),
        new VueLoaderPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    //实时重新加载
    devServer:{
        contentBase:"./dist",
        hot:true
    },
    module:{
        rules:[
            {
                //css
                test:/\.css$/,
                use:[
                    "style-loader",
                    "css-loader"
                ]
            },
            {
                //图片
                test:/\.(png|svg|jpg|gif)$/,
                use:[
                    "file-loader"
                ]
            },
            {
                //babel
                test:/\.m?js$/,
                exclude: /(node_modules | bower_components)/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['@babel/preset-env']
                    }
                }
            },
            {
                //vue
                test:/\.vue$/,
                use:[
                    'vue-loader'
                ]
            }
        ]
    }
}

四、配置映射命令

在package.json中

"scripts": {
    "show": "webpack -v",
    "start": "node ./src/main.js",
    "build": "webpack",
    "dev": "webpack-dev-server --open"
  },

例如:"show":"webpack -v",如果要获得安装的webpack版本,在终端输入npm run show

五、一些指令

不推荐全局安装webpack,在自己电脑中的项目使用的是自己电脑中的webpack,如果项目到了另一台电脑上,第一,安装的版本会导致兼容性问题。第二,如果没有在电脑中全局安装webpack就无法打包。

所以推荐本地安装webpack,安装到对应的项目中。webpack打包工具随着项目走

本地安装的时候,建议把webpack安装到devDependencies开发依赖(--save-dev)中,因为webpack是一个打包工具,需要的是结果,而不是工具

为了区分生产环境,和开发环境依赖,--save(生产环境),--save-dev(开发环境)

1.本地安装webpack

webpack对版本的要求比较高,所以可能输入在输入某些没有指定版本的指令时,由于时间的先后会报错,根据版本重新安装即可。

npm init -y  //初始化
npm i -D [email protected]
npm i -D [email protected]

2.处理css文件

npm install --save-dev [email protected] [email protected]

3.图片

npm i --save-dev [email protected]

4.文件路径问题

在html文件中引入打包后的文件后,就可以在浏览器中运行了,但是比如在打包图片后由于路径问题会导致图片加载不进去。

解决文件的路径问题:将index.html打包到bundle.js所在目录中,同时也会在index.html中自动的<script>引入bundle.js。html中可以不用引入,在终端启动后,dist文件夹中会出现index.html,在浏览器中打开即可。

npm i --save-dev [email protected]

5.实时重新加载

npm i --save-dev [email protected]

6.babel浏览器兼容性

npm i -D babel-loader @babel/core @babel/preset-env

7.vue-loader

npm i -D vue-loader vue-template-compiler

8.实时加载

npm run dev