webpack-搭建环境及步骤详解

1、//会下载一个package.json 里面是版本描述

npm init -y

2、//安装webpack 后面加上了--淘宝镜像，可加可不加，安装完多了mode_modules，package.json里会多了devDependencies里有webpack、webpack-cli

npm install webpack webpack-cli -D --registry=https://registry.npm.taobao.org 

3、新建src/index.js 、index.html

新建个配置文件webpack.config.js

module.exports ={

    mode：‘development’ ,//这是开发模式，production生产模式

    entry:path.join(__dirname,'src','index.js') //规定入口文件位置

    output:{

        filename:'bundle.js',
    
        path:path.join(__dirname,'dist')

    }

}

4、在package.json的文件里的scripts里加上

“build”:"weboack"

5、//这样就打包完成了，文件目录里多了dist，里面有bundle.js打包出来的文件

npm run build 

6、//安装解析html的插件 ，devDependencies里多了html-webpack-plugin

npm install html-webpack-plugin -D 

7、 //安装能启动服务的插件,devDependencies里多了webpack-dev-server

npm install webpack-dev-server -D --registry=https://registry.npm.taobao.org

8、配置配置文件

module.exports ={

    const HtmlWebpackPlugin = require('html-webpack-plugin'') //引入插件

    mode：‘development’ ,//这是开发模式，production生产模式

    entry:path.join(__dirname,'src','index.js') //规定入口文件位置

    output:{

        filename:'bundle.js',

        path:path.join(__dirname,'dist')

    }

    plugins:[

        new HtmlWebpackPlugin({

            template:path.join(__dirname,'src','index.html'),

            filename:'index.html' //产出的文件名

        })

],

    devServer:{

        port:3000

        contentBase:path.join(__dirname，‘dist’)

    }

}

9、在package.json的文件里的scripts里加上

"dev":"webpack-dev-server"

10、启动服务

npm run dev

然后访问localhost:3000/index.html即可