webpack项目搭建

最新推荐文章于 2025-07-11 16:02:57 发布

原创最新推荐文章于 2025-07-11 16:02:57 发布 · 189 阅读

0 ·

CC 4.0 BY-SA版权

（webpack 4+）
安装node 、 npm
创建项目（app 文件夹）
进入app 文件夹
执行 npm init
yizhi 这里一直回车就可以了

进去项目，新建src文件夹，创建index.js 在这里插入图片描述
安装webpack 慢的话可以使用淘宝镜像 --registry=https://registry.npm.taobao.org
npm install webpack webpack-cli --save-dev --registry=https://registry.npm.taobao.org

根目录创建webpack.dev.config.js
在这里插入图片描述
package.json 添加 “dev”: “webpack --config ./webpack.dev.config --mode development”

然后就可以执行命令npm run dev

安装 webpack-dev-server 、 html-webpack-plugin
npm install webpack-dev-server html-webpack-plugin --save-dev

创建index.html
在这里插入图片描述
webpack.dev.config 添加内容

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname,
        filename: './relrease/bundle.js'
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html' //运行模板
        })
    ],

    devServer: {
        contentBase: path.join(__dirname, './release'), //根目录
        open: true, //自动打开浏览器
        port: 9000 //端口
    }
}

package.json 修改 “dev”: “webpack --config ./webpack.dev.config --mode development” 为
“dev”: “webpack-dev-server --config ./webpack.dev.config --mode development”

执行命令npm run dev 就可以启动了