Webpack

发布时间:2021-06-22 22:48:18 浏览量:98 标签: Webpack

Webpack

  1. 安装webpack

    1. 初始化 : npm init -y

    2. 为了是安装更快可以使用淘宝镜像 : npm set registry https://registry.npm.taobao.org/

    3. 安装webpack

      npm install webpack

      npm install webpack-cli

      npm install webpack webpack-cli -D | -S -g

      -D 当安装工具包后,只在开发的时候使用,发布上线以后就会删除

      -S 发布以后依然保留该模块 

      -g 全局安装


    如果出现了版本不兼容的问题,需要使用固定的版本通过设置指定的版本进行安装软件:

    npm install webpack@4.4.4 -D

    如果使用的是12+版本出现了错误,可以指定版本:

    npm install webpack@5.4.0版本

    npm install webpack-cli@4.2.0版本


    2.打包js案例

        (1)、创建一个html文件

    

image.png

    (2)、创建一个js文件

image.png


运行html文件的时候,出现报错:index.js:1 Uncaught SyntaxError: Cannot use import statement outside a module因为浏览器并不兼容import引入模块的这种方法,所有我们要用到webpack打包

安装: npm install webpack webpack-cli -g 


除了全局安装的方式外,需要使用修改配置文件的方式进行配置脚本启动修改“package.json”文件

image.png


保存退出 在dos命令下执行(cmd的黑窗口) npm run start



另外一种打包方式:

可以在封装的时候,做一些更详细的配置

1.在项目中创建一个配置文件  扩展名为 .js   需要在这个配置文件中写入配置代码

        const path = require("path");

        module.exports={

            entry:path.join(__dirname,'./index.js'),

            output:{

                path:path.join(__dirname,"./dist"),

                filename:'bundle.js'

            }

        }

在到packzge.json文件中添加新命令

 "scripts": {

            "test": "echo \"Error: no test specified\" && exit 1",

            "start":"webpack ./index.js -o dist",

当指定nstar命令的时候,帮我们去执行配置文件 webpack --config 文件名

            "nstart":"webpack --config webpack.config.js" ***********

          },



 4.热重载

代码修改后,立马就发生改变

1.热重载: webpack-dev-server

需要安装热重载 

npm install webpack-dev-server -D

2.如何使用:

在配置文件中刚刚 webpack 改成 webpack-dev-server

"nstart":"webpack --config webpack.config.js"

改成

"nstart":"webpack-dev-server --config webpack.config.js --hot --port 1999"

--hot 热重载(自动更新)

--port 1999 监听端口

--open 自动打开浏览器

执行

npm run nstart

如果出现报错:Error: Cannot find module 'webpack-cli/bin/config-yargs'

可能是版本不兼容

需要安装老版本:

主要问题就是由于新版本的webpack-cli不兼容

1.卸载 npm uninstall webpack-cli

2.安装旧版本: npm install webpack-cli@3.3.12 -D

注意版本

如果已经通过热重载的方式运行了项目,在index.html中需要把script标签删除

需要走服务器去执行我们的代码


5.打包HTML

1.也需要安装新的东西

npm install html-webpack-plugin -D  

2.修改配置文件 webpack.config.js

引入模块:

const HtmlWebpackPlugin = require("html-webpack-plugin");

加上:

//打包html配置

    plugins:[

        new HtmlWebpackPlugin({

            template:path.join(__dirname,"./index.html"),

            filename:"index.html"

        })

    ]

    需要删除index.html中的 script的引入代码,可以package配置文件中添加一个新的命令

    "zou":"webpack --config webpack.config.js"

    执行 npm run zou

    此时webpack会自定把index.html 和index.js 关联到一起 生成一个新的index.html

    


6.CSS打包

1.安装 css-loader 和 style-loader

1.css-loader 软件 可以把css文件解析成webpack能看到的格式

2.style-loader 把打包好的css模块解析成css样式表

2.修改配置文件:

webpack.config.js 

module:{

        rules:[{

            test:/.css$/,

            use:['style-loader','css-loader']

        }]

    }

执行 npm run zou


 7. html热更新


 1.安装 raw-loader

   npm install raw-loader -D

2.修改配置文件

 module:{

        rules:[{

            test:/.css$/,

            use:['style-loader','css-loader']

        },

        {

            test:/.(htm|html)$/,

            use:[

                'raw-loader'

            ]

        }]

    }

 3.在index.js文件中引入index.html文件

    import './index.html'

4.执行热重载




搜索
关于我
吴英赫
最新标签
推广