您的位置: 首页  >  IT文章  >  webpack根本安装和配置

webpack根本安装和配置

分类: IT文章 • 2024-12-13 08:46:13
webpack基本安装和配置

       简单来说，webpack是一个模块打包工具，在 webpack 里，所有类型的文件都可以是模块，包括我们最常见的 JavaScript，及 CSS 文件、图片、json 文件等等。通过 webpack 的各种加载器，我们可以更高效地管理这些文件。

 

       本文配置webpack并使网页上输出最简单的Hello, World!!! 。程序使用React js完成并使用了ES2015。

1，创建一个空项目，在项目目录下创建一个package.json 文件，用于项目名称，依赖等等，终端命令如下：

  npm init

 

2,  在当前目录下安装webpack以及其它依赖，由于使用React，所以引入了react和react-dom

  npm install webpack react react-dom --save-dev

    有时webpack需要获取管理员权限才能安装成功。sudo su之后再install即可解决

 

3， 此时目录下只有package.json 和node_modules两个文件，package.json中可以看到安装过的依赖，node_modules是install时生成的。

       实现简单的HelloWorld，还需要创建一个index.html和一个入口文件index.js，出于简单，我都放在根目录。index.html为空，mian.js实现网页输出HelloWorld。代码如下：

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class HelloWorld extends Component {
    render() {
        return (
            <div>
                Hello, World ! ! !
            </div>
        )
    }
}


ReactDOM.render(
    <HelloWorld />,
    document.getElementById('content')
);

 

4， 创建webpack配置文件webpack.config.js。并进行配置： 

module.exports = {
    entry: './main.js',
    output: {
        path: '',
        filename: 'bundle.js'
    }
};

        entry:  设置入口文件

        output:  path为webpack打包成功之后文件存放路径。  filename为webpack打包成功之后文件名称。

     webpack.config.js这个名字为webpack默认的配置文件，如果不想用这个名字，可以：

webpack -config yourname

  

5, 安装和使用Webpack Loader。

    Webpack Loader作用：

          1，将React js的jsx语句转化为js语句

          2，支持ES2015

          3，可以是js文件通过import直接引入css等样式以及图片。

          等等等。

    因为我需要使用Reactjs和ES2015，所以安装命令如下：

npm install babel-core babel-loader --save-dev
npm install babel-preset-react babel-preset-es2015 --save-dev

 

    具体实现需要在webpack-config.js中加入module属性。

module.exports = {
    entry: './index.js',

    output: {
        publicPath: "",
        filename: 'bundle.js'
    },

    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader?presets[]=es2015&presets[]=react'
            }
        ]
    }
};

 

6，在终端输入webpack。会看见生成了一个bundle.js文件。这个文件是webpack的entry文件打包成功之后得到的，存放路径和名字都是自己在webpack.config.js中设置的。

webpack

 

7，修改之前创建的index.html文件，并引入打包生成的bundle.js文件。代码如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="content"></div>
    <script src="bundle.js"></script>
</body>
</html>

 

8，打开index.html，将会看到我们需要的 Hello,World!!!。但是每次我们修改文件并运行时都需要在终端输入webpack再刷新页面。这种方式比较麻烦。此时我们需要使用webpack-dev-server来实现页面自动刷新

         （1）安装webpack-dev-server

npm install webpack-dev-server --save-dev

          

         （2）在webpack.config.js中添加

module.exports = {
    entry: './index.js',
    output: {
        path: '',
        filename: 'bundle.js'
    },
    
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader?presets[]=es2015&presets[]=react'
            }
        ]
    },
    
    devServer: {
        historyApiFallback: true,
        hot: true,
        inline: true,
        progress: true
    }
};

 

         （3）在package.json中添加

{
  ......
  "scripts": {
    "start": "webpack-dev-server --hot --inline"
  },
  ......
}

        

        （4）配置完成，在终端输入：

npm start

           在浏览器里面输入http://localhost:8080/   页面上出现Hello,World!!!。    修改main.js中的Hello,World!!!为Hello,Curry!!!，等待两秒，不需要手动刷新，页面自动刷新，出现Hello,Curry!!!。  完成！！！

 

 

附参考网站：http://www.jianshu.com/p/418e48e0cef1

                      https://www.zfanw.com/blog/webpack-tutorial.html

相关推荐