webpack的简单使用

最新推荐文章于 2024-07-28 00:56:04 发布

1华仔11

最新推荐文章于 2024-07-28 00:56:04 发布

阅读量216

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/qq_14990527/article/details/80179397

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

安装

在全局安装webpack

1	`npm install -g webpack`

创建项目

创建新文件夹webpack-study，用于存放项目。命令行定位到该文件夹下。输入以下命令进行初始化。

1	`npm init`

然后根据项目情况配置选项或直接回车。

此时发现在该文件夹内新增了一个package.json文件。

安装webpack依赖包

1	`npm install` `--save-dev webpack`

此时多了node_modules文件夹。

在webpack-study文件夹下创建两个文件夹，app和public。

并分别创建以下文件。

1

2

3

4

5

 
        module.exports =  
        function 
        () { 
       
        let greet = document.createElement( 
        'p' 
        ); 
       
        greet.textContent =  
        'Hi winnw!' 
        ; 
       
        return 
        greet; 
       
        }

1 2	`const greeter = require(` `'./Greeter.js'` `);` `document.querySelector(` `"#root"` `).appendChild(greeter());`

 
        <!DOCTYPE html>   
       
        <html>   
       
        <head>   
       
        <mata charset= 
        "utf-8" 
        >   
       
        <title>my first webpack</title>   
       
        </head>   
       
        <body>   
       
        <p id= 
        "root" 
        >   
       
        hello world!   
       
        </p>   
       
        <script type= 
        "text/javascript" 
        src= 
        "bundle.js" 
        ></script>   
       
        </body>   
       
        </html>

创建webpack.config.js

 
        // __dirname是node.js的全局变量，它指向当前执行脚本所在的目录。 
       
        module. exports ={ 
       
        devtool:  
        'eval-source-map' 
        , 
       
        entry:__dirname +  
        '/app/main.js' 
        , 
       
        output 
        :{ 
       
        path:__dirname+ 
        '/public' 
        , 
       
        filename: 
        'bundle.js' 
       
        }, 
       
        mode: 
        'development' 
        , 
       
        devServer: { 
       
        contentBase:  
        "./public" 
        ,//本地服务器所加载的页面所在的目录 
       
        historyApiFallback:  
        true 
        ,//不跳转 
       
        inline:  
        true 
        //实时刷新 
       
        }  
        /*, 
       
        module:{ 
       
        loaders:[ 
       
        { 
       
        test:/\.css$/, 
       
        loaders:['style-loader','css-loader'] 
       
        } 
       
        ] 
       
        }*/ 
       
        }

打包

1

 
        webpack 
       

低版本的webpack可能可以成功，但我的版本是4.x，提示以下信息：

1

2

3

4

 
        The CLI moved  
        into 
        a separate package:webpack-cli. 
       
 
        Please install  
        'webpack-cli' 
        in 
        addition  
        to 
        webpack itself  
        to 
        use the CLI. 
       
 
        -> 
        when 
        using npm: npm install webpack-cli -D 
       
 
        -> 
        when 
        using yarn: yarn  
        add 
        webpack-cli -D 
       