Webpack浅学习

Webpack安装

新建一个文件夹，用vscode打开，在终端输入npm init 命令，生成package.json文件

执行npm i webpack@4.46.0 webpack-cli@3.3.12 --save-dev命令，安装webpack，webpack-cli 

注意：webpack与webpack-cli会有版本的问题，要相对应

创建webpack的配置文件，在项目的根目录下创建一个webpack.config.js文件 

 内容为：

// 导入path模块
const path=require('path')
// 使用的是commonJS规范
module.exports={
    entry:path.join(__dirname,'/src/index.js'),
    output:{
        path:path.join(__dirname,'dist'),
        filename:'bundle.js'
    },
    mode:'development'
}

在项目的根目录下创建一个src文件夹，并创建一个index.js文件作为入口文件 

 填写一下内容进行测试：

 修改package.json文件

在src下新创建index.html文件，导入打包后的文件，内容如下：

在终端中运行npm run build，对文件进行打包 

打开index.html文件就可以看到打包完成 

webpack自动更新打包文件，需要下载webpack-dev-server，在终端中输入npm i webpack-dev-server@3.11.3 --save-dev 

修改webpack.config.js文件与 package.json文件

 

 

新建一个test文件夹，将src文件夹下的index.html剪切到test文件夹中，并修改index.html文件的内容如下：

在终端输入npm run dev可以运行webpack项目

 

至此，webpack的安装完成。

webpack.config.js配置文件 

webpack.config.js配置文件采用的是communJS规范

// 导入path模块
const path=require('path')
// 使用的是commonJS规范
module.exports={
    entry:path.join(__dirname,'/src/index.js'),
    output:{
        // path:path.join(__dirname,'dist'),
        filename:'bundle.js'
    },
    mode:'development',
    devServer:{
        port:8080,
        contentBase:path.join(__dirname,'test'),
        publicPath: '/dist/',
    }
}

entry属性，主要是用来设置webpack的入口文件

path.join（）方法是路径拼接，__dirname获取当前执行文件的绝对路径，在本次设置中，入口文件就是src文件夹下的index.js文件 

entry:path.join(__dirname,'/src/index.js'), 
//假设当前执行文件的绝对路径是'E://test'(即__dirname),拼接出来的路径就是'E://test/src/index.js'

 output属性用来设置出口文件，filename是用来设置文件名，path用来设置输出文件的文件夹 

output:{
        // path:path.join(__dirname,'dist'),
        filename:'bundle.js'
    },

 mode设置开发模式，默认是’production‘,这里设置为开发模式

 

devServer是webpack的热替换功能 

 webpack的浅学习到这里，后面可能会进一步学习。