从一个文件夹开始搭建一个webpack的开发环境的详细步骤

最新推荐文章于 2022-01-06 00:01:12 发布

VastWu

最新推荐文章于 2022-01-06 00:01:12 发布

阅读量415

点赞数

分类专栏： webpack web前端 vs code 文章标签： node.js vue.js webpack 前端 npm

本文链接：https://blog.csdn.net/VastWu/article/details/106226127

版权

web前端同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

webpack

1 篇文章 0 订阅

订阅专栏

vs code

1 篇文章 0 订阅

订阅专栏

如何搭建一个webpack开发环境的详细步骤

需要的工具：
1. vs code
2. 安装node.js

八部：

1. 在vs code中打开一个空的文件夹，即我们的项目根目录。

2. 然后在根目录新建好项目的一些必备结构（常规操作，不细说了）：

3. ctrl+` 打开终端，键入 npm init -y 把项目交给npm来管理
在这里插入图片描述
然后你就会发现项目中自动生成了package.json的配置文件：

4. webpack ./src/main.js ./dist/bundle.js 接下来尝试在终端使用webpack编译一个文件
语法：webpack 要打包的文件的路径打包好的输出文件路径
编译成功会发现项目中生成了我们指定的文件夹路径：
在这里插入图片描述
如果你失败了，可以看看本文末尾我遇到的一些常见问题汇总，这里需要注意的是你一定要安装webpack：cnpm i webpack -g \ cnpm i webpack -D ,安装完成后webpack -v可以看到全局安装的版本号，但是想要使用webpack，你必须进行本地安装-D
5. 其实到这里webpack已经在管理我们的项目了，但是为了达到更加方便的目的，我们可以进行配置文件的配置，当然，配置文件也是必不可少的一部分：
5.1 在根目录新建一个文件： webpack.config.js

var path =require('path')

module.exports={
entry:path.join(__dirname,'./src/main.js'),//入口文件
output:{
path:path.join(__dirname,'./dist'),//输出路径
filename:'bundle.js'
},
}

5.2 到这里再次打开终端，仅输入webpack 回车你会发现可以达到之前同样的目的
5.3 当然，配置文件中还有其他的属性：plugins 和 module
plugins里面放置了所有的插件对象
module 指定了一些插件的规则，即指定谁用到这个插件

完整的配置文件如下：

var path =require('path')

var htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports={
entry:path.join(__dirname,'./src/main.js'),//入口文件
output:{
path:path.join(__dirname,'./dist'),//输出路径
filename:'bundle.js'
},
plugins:[
new htmlWebpackPlugin({  //这个插件把指定的页面生成一个新的页面，并且主动帮我们向该页面引入js等文件
template:path.join(__dirname,'./src/main.html'),
filename:'main.html',
}),
new VueLoaderPlugin()  //这里放的是加载器插件，用来处理一些webpack不认识的后缀的
],
module:{
rules:[
{test:/\.vue$/,use:'vue-loader'},                                  //识别.vue文件
{test:/\.css$/,use:['style-loader','css-loader']},			  //识别.css文件
{test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },      //识别一些字体文件
{test:/\.(jpg|png|gif|bmp|jpeg)$/ ,
use:[{loader:'url-loader?limit=7631&name=[hash:8]-[name].[ext]',
options:{esModule: false}}]},							//处理图片路径的loader
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/ },    //转换js文件为低级语法
{test:/\.less$/,use:['style-loader','css-loader','less-loader']},//识别.less文件
{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}//识别.sass文件
]
}
}

当然你必须安装对应的一些包,下面是一些你可能需要安装的包：

cnpm i webpack-dev-server -D
cnpm i html-webpack-plugin -D
cnpm i style-loader css-loader -D
cnpm i webpack-cli -D
cnpm i less-loader -D    cnpm i less
cnpm i sass-loader -D    cnpm i node-sass
cnpm i vue-loader vue-template-compiler -D  
cnpm i webpack-cli -D
cnpm i vue-router -S
cnpm i vue-resource -S
cnpm i babel-core babel-loader babel-plugin-transform-runtime -D 
cnpm i babel-preset-env babel-preset-stage-0 -D

这里有必要说一下babel，也就是以上最后安装的两组包，是用来处理我们的js文件的，他可以把我们所有的js文件转换为新的可以被浏览器识别解析的低级语法js，所以为了避免babel把所有的js文件都转了浪费内存，我们可以使用exclude忽略某些文件夹。最重要的是，要使用babel我们还要在根目录新建一个配置文件.babelrc：

5.4 到这里的话，我们要使用的一些插件也差不多安装好了，webpack也都能认识绝大部分的后缀文件了。现在我们要在package.json配置文件中加入：
“dev”: “webpack-dev-server --open --port 3000 --hot --contentBase src --host 192.168.0.7”
–open 启动后马上打开浏览器
–port 3000 指定端口号
–hot 启动热加载
–contentBase src 指定项目根目录
–host 192.168.0.7 指定主机当手机电脑在同一局域网，手机可访问
在这里插入图片描述

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

6. 按道理说写到这，开发环境就搭建好了，如果你还有任何装包方面的问题，你可以直接删除掉你的node_modules文件夹，然后清空你的pakeage.json文件，复制我的进去，然后cnpm i重新安装所有的包，包治百病：

{
"name": "my-AccountBook",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^3.5.3",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"less-loader": "^6.1.0",
"sass-loader": "^8.0.2",
"style-loader": "^1.2.1",
"url-loader": "^4.1.0",
"vue-loader": "^15.9.2",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
}
}

7. 项目到这里还不算完整，还有我们的git
使用git管理源代码上传到码云
7.1新建一个.gitignore的忽略文件，里面指定的文件夹不会被上传到git
node_modules
.idea
.vscode
.git
7.2 新建一个README.md文件，说明项目用途
7.3 LICENSE协议

The MIT License (MIT)
Copyright (c) 2014 connors and other contributors

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

7.4 初始化git git init
7.5 git add . 然后提交 git commit git commit -m “init my project”
7.6 git remote add origin https://gitee.com/vastwu/vue110.git
git push -u origin master 这里上传到我的码云了，如果你要上传去自己的码云复制你的仓库地址push过去

8. 在vue中，路由也是极其重要的，这里把路由单独抽离：
8.1在src新建一个router.js

import VueRouter from 'vue-router'

// 3. 创建路由对象
var router = new VueRouter({
routes: [
]
})
// 把路由对象暴露出去
export default router

8.2 Main.js中导入即可
//导入router.js路由模块
import router from ‘./router.js’
完整目录：
在这里插入图片描述
npm run dev 跑起来完美

================================================================

版本问题两个：

在运行webpack的时候一直提示没有安装webpack，但是通过webpack -v可以看到我是有安装webpack的。
解决方法：是webpack的版本问题导致
卸载重新安装已解决问题，建议修改4.0以下版本
npm uninstall webpack -g cnpm install webpack@3.5.5 -g
这里在使用babel的时候又遇到一个版本问题 babel-loader和babel-core版本不对应导致babel不能正常运作
参考：https://blog.csdn.net/zr15829039341/article/details/86553652

其他：

在使用图片是遇到一个问题图片的路径也就是img标签的src变成了[object Module]
参考：https://blog.csdn.net/simper_boy/article/details/103455444
在使用webpack的时候，终端报错： webpack : 无法加载文件 C:\Users\VastWu\AppData\Roaming\npm\webpack.ps1，因为在此系统上禁
止运行脚本。
解决方法：原因是因为powershell对于脚本的执行有着严格的安全限制。
解决方案：
一、使用管理员身份打开PowerShell
二、键入Set-ExecutionPolicy RemoteSigned命令
三、键入Y
最后可以使用Get-ExecutionPolicy来看看是否修改成功

如有不正之处，欢迎各位大神指教  -vastwu

VastWu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
从一个文件夹开始搭建一个webpack的开发环境的详细步骤

如何搭建一个webpack开发环境的详细步骤需要的工具：1. vs code2. 安装node.js八部：1. 在vs code中打开一个空的文件夹，即我们的项目根目录。2. 然后在根目录新建好项目的一些必备结构（常规操作，不细说了）：3. ctrl+` 打开终端，键入 npm init -y 把项目交给npm来管理然后你就会发现项目中自动生成了package.json的配置文件：4. webpack ./src/main.js ./dist/bundle.js 接下来尝试
复制链接

扫一扫