webpack的基本使用

webpack的基本使用

在项目中安装配置webpack

注意：要安装node和npm

1. 创建一个文件，在终端进行npm init -y 初始化 ，建立package.json文件；
2. 安装webpack，输入npm i -D weback webpack-cli（局部安装）；
3. 项目根目录中创建webpack.config.js的webpack配置文件； 项目根目录中创建一个src文件夹，里面创建一个mian.js文件和一个a.js文件，将a文件模块导入到main.js
4. 在webpack配置文件下，配置

//引入node的path模块，生成绝对路径
const path=require('path');
module.exports={
    // mode编译模式： development开发模式 /production 上线
    mode:'development'
}

4. 在package.json文件中的script脚本中添加 “dev”:“webpack”

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack"//script节点下的脚本，可通过npm run 执行，如果创建的webpack配置文件名字不是webpack.config.js，则`"dev":"webpack   --config + webpack的配置文件名"`（默认是执行webpack.config.js）
  },

5. 在终端运行npm run dev命令,启动webpack进行项目打包。就会生成一个dist目录下的main.js的打包成功文件。
6. 修改打包的入口和出口，在webpack.config.js中新增如下信息：
   （webpack 4.X版本中默认：打包入口文件为src-index.js;打包出口文件为dist-main.js;）

const path=require('path')//导入node.js中操作路径的模块
module.exports={
//注意：dirname前面是两个下划线，不然报错
    entry:path.resolve(__dirname,'./src/index.js'),
    output:{
        path:path.resolve(__dirname,'dist'),//输出文件的存放路径
        filename:'bundle.js'//输出文件的名称
    }

}

7. 自动打包配置

在package.json文件中的script脚本中修改 “dev”:“webpack serve”，在项目根目录下 下载webpack-dev-server，然后你改js文件里的内容，启动npm run dev就能自动打包实时更新到页面

8. 打包完成后，浏览器自动打开主页页面

• 通过 npm 安装html-webpack-plugin
• 在webpack.config.js中引入

const HtmlWebpackPlugin = require('html-webpack-plugin');
//由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入 new 实例
 plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
     /* 服务器配置 */
    devServer: {
        // 启动服务器，自动打开页面
        open: true,
        // 热更新，页面自动更新
        hot: true,
    },

8.引入css文件进行打包的话，npm i -D style-loader css-loader

const path=require('path')//导入node.js中操作路径的模块
module.exports={
//注意：dirname前面是两个下划线，不然报错
    entry:path.resolve(__dirname,'./src/index.js'),
    output:{
        path:path.resolve(__dirname,'dist'),//输出文件的存放路径
        filename:'bundle.js'//输出文件的名称
    },
    //配置模块加载器
    module:{
		rules:[
       			{
			test:/\.css$/,
			use:['style-loader','css-loader']
				}
			]
		}

9.html文件中，自动的引入js文件，npm i -D html-webpack-plugin

```javascript
const path=require('path')//导入node.js中操作路径的模块
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
//注意：dirname前面是两个下划线，不然报错
    entry:path.resolve(__dirname,'./src/index.js'),
    output:{
        path:path.resolve(__dirname,'dist'),//输出文件的存放路径
        filename:'bundle.js'//输出文件的名称
    },
    //配置模块加载器
    module:{
		rules:[
       			{
			test:/\.css$/,
			use:['style-loader','css-loader']
				}
			]
		},
		plugins:[

new HtmlWebpackPlugin(
{
template:''//html文件路径
}
)
				]
		
		}