简单的webpack打包步骤

前提是已经安装好node.js 因为webpack就是基于node.js写的
nodejs中文官网
webpack官网
/*搭建webpack步骤
* 1.初始化环境 npm init -y
* 2.安装webpack npm install webpack webpack-cli -D
* 3.创建src目录和配置文件webpack.config.js
* 4.进行webpack配置mode、entry、output、plugins等
* 5.打开网页需要配置npm install html-webpack-plugin -D 用于解析html
* 6.之后还需安装npm install webpack-dev-server -D 用于启动服务
* 7.引入html-webpack-plugin插件，写入插件即内容
* 8.配置devServer
* 9.运行 npm run build 进行打包
* 10.运行 npm run dev 运行网页
*/
新建webpack.config.js文件进行配置

//引入path    是用的nodejs的一个path模块，path模块就是寻找当前目录的一个模块
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    //模式：开发环境    
    mode: 'development',   //production  不写的话默认为生产模式
    //入口文件   程序从这里开始执行，webpack开始打包
    entry: path.join(__dirname,'src','index.js'),  //__dirname指的是当前目录,是目录形成绝对路径
    output:{
        //输入的文件名
        filename: 'bundle.js',
        //输入的路径  webpack会自动打包生成
        path: path.join(__dirname,'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            //文件中找到的路径
            template: path.join(__dirname,'src','index.html'),
            //打包输出的路径
            filename: 'test.html'
        })
    ],
    devServer: {
        //端口
        port: 3000,
        contentBase: path.join(__dirname,'dist')
    },
    module: {
        rules: [
        //引入css插件   npm install --save-dev css-loader
          {
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
          },
        ],
    },
}

package.json文件配置

{
  "name": "webpack-myself",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^4.0.4",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

文件目录展示

main.js中引入css文件

console.log('this is index.js')
import indexcss from '../css/index.css';