欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

webpack开始一个项目的步骤

程序员文章站 2024-02-20 16:35:30
这几天在学习Vue 用到了webpack打包工具 开始一个项目的时候 需要配置很多项 刚开始写的时候 配置文件总是缺什么再去配置什么 创建项目就用了半个小时 后来觉得应该有个步骤 这样才知道下一步该干什么 提高效率 所以把webpack开始一个新工程的步骤总结一下 以后忘了可以按照这个来 1 创建空 ......

这几天在学习vue  用到了webpack打包工具  开始一个项目的时候  需要配置很多项  刚开始写的时候  配置文件总是缺什么再去配置什么  创建项目就用了半个小时  后来觉得应该有个步骤  这样才知道下一步该干什么  提高效率  所以把webpack开始一个新工程的步骤总结一下  以后忘了可以按照这个来

 

1  创建空文件夹

 

2  执行 npm init -y 

 

3  创建基本目录

|webpack.config.js(文件)
|.babelrc(文件)
|dist(目录)
|src(目录)
    |index.html(文件)
    |main.js(文件)
    |css(目录)
        |index.css(文件)

 

4  执行

npm i webpack webpack-cli webpack-dev-server -d
npm i html-webpack-plugin -d

安装需要的依赖

 

5 安装css的loader

npm i style-loader css-loader -d

 

6  配置webpack.config.js文件

     const path = require('path')
        const htmlwebpackplugin = require('html-webpack-plugin')

        module.exports = {
            entry:{path:path.join(__dirname,'./src/main.js')},
            output:{
                path:path.join(__dirname,'./dist'),
                filename:'bundle.js'
            },
            module:{
                rules:[
                    {test:/\.css$/,use:['style-loader','css-loader']}
                ]
            },
            plugins:[
                new htmlwebpackplugin({
                    template:path.join(__dirname,'./src/index.html'),
                    filename:'index.html'
                })
            ]
        }

 

7  执行

npm i babel-core babel-loader@7.1.5 babel-plugin-transform-runtime -d
npm i babel-preset-env babel-preset-stage-0 -d

安装babel 和语法库   并配置根目录下的.babelrc文件

{
    "presets":["env","stage-0"],
    "plugins":["transform-runtime"]
}

 

8  在package.json文件的script节点中加入命令 

"dev": "webpack-dev-server --open --port 3000 --contentbase src --mode=development --hot"

 

9  控制台运行   npm run dev   查看浏览器