搭建webpack环境

 1. 初始化项目

　　先创建一个项目

　　1). 生成package.json

npm init

　　2). 创建入口js: src/index.js

console.log('Hello Webpack!')
document.getElementById('root').innerHTML ='<h1>Hello222</h1>'

　　写上上面两行代码方便测试

 　　3). 创建页面文件: index.html

 <div id="root"></div>

2. webpack基本使用

 　　1). 下载依赖包

npm add -D webpack webpack-cli
npm add -D html-webpack-plugin

　　2). 创建webpack配置: webpack.config.js(自己创建)

/* 
使用common JS模块化语法
向外暴露一个配置对象
*/
const path=require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
const {CleanWebpackPlugin}=require('clean-webpack-plugin')
module.exports={
    //__dirname:全局变量，表示当前文件所在目录的绝对路径
    //模式
    //mode:'development',
    //入口
    entry:'./src/index.js',
    //出口
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    //模块打包器
    module:{
        rules:[

        ]
    },

    //插件
    plugins:[
        //实例化对象
        new HtmlWebpackPlugin({
            template:'index.html'//在执行命令的所在目录查找
        }),
        new CleanWebpackPlugin(),//清除打包文件夹dist

    ],
    //开发服务器
    devServer: {
        port:8081,
        open: true, // 自动打开浏览器
        quiet: true, // 不做太多日志输出
      },
}

　　3). 生成环境打包并运行

　　配置打包命令:  （在package.json的scripts的值中添加）

"build": "webpack --mode production"

　　打包项目: 

npm run build

 

3. 开发环境运行

　　1). 现在的问题:
　　每次修改项目代码后, 必须重新打包, 重新运行

　　2). 下载依赖包　

npm add -D webpack-dev-server

　　3). 配置开发服务器(上面的 webpack.config.js(已经写好了)　

devServer: {
2　　open: true, // 自动打开浏览器
3　　quiet: true, // 不做太多日志输出
4　　},

 　　4). 开发环境运行

　　　 配置命令: 

"dev": "webpack-dev-server --mode development"

　　执行命令:

npm run dev

运行的时候可能会出现错误Error: Cannot find module 'webpack-cli/bin/config-yargs'，看看我的下一个博客