1.创建一个文件夹（名字可随意，我的是webpack），里面是再创建一个叫src的文件夹，src文件夹创建 css,js,image三个文件夹及index.html和main.js。如图：
webpack文件夹的内容
2.index.html和main.js的内容
js文件里有一句 import $ from ‘jQuery’ 。它的意思是引入jQuery，下面我们来引入jQuery：
打开PHPstorm的控制台（我用的是PHPstorm，webstorm也可以）输入一下命令安装 cnpm i jquery
然后敲回车 ，安装好了后会发现项目文件夹多了node_modules文件夹，下载好的jQuery就在里面
这回都准备好了，我们看一下页面是否应用到了我们在main.js定义的样式
结果并没有我们相象的效果，而且报了一个错说是语法错误，原来import $ from ‘jQuery是es6的语法，现在浏览器并不支持，解决办法如下。
3.项目初始化一下 npm init -y
回车后看到项目文件夹多了一个package.json。先不管他是干啥用的，我们下一步：
命令行我们把main.js编译成我们现在能用的版本：webpack ./src/main.js ./dist/bundle.js
敲回车，报错了，编译失败
继续我们的解决办法:
更换打包命令为: webpack ./src/main.js -o ./dist/bundle.js 。继续敲回车发现红色错误没有了，但是黄色警告还在。这时看项目文件夹已经多了一个dist文件，而且里面也有了一个bundle.js的编译文件。
有黄色警告肯定还是不行啊，我们来继续解决：
4.package.json配置
接下来，找到package.json.添加上”dev”和”build”这两个信息以及他们的值：
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1”,
"dev":"webpack --mode development",
"bulid":"webapck --mode production"
}
5.全局安装webpack-cli
npm i --save-dev webpack-cli -g
然后命令行输入命令 npm run dev，敲回车后又是一堆错 他妈的！
没办法，继续解决呗！
src文件夹再建一个js文件，叫index.js（里面什么都不用写）。然后继续上一步npm run dev 回车。
这回终于不报错了，而且dist文件夹也多了个main.js。我们先别管它干什么的。
这回用下面命令，重新编译 webpack ./src/main.js -o ./dist/bundle.js --mode development
这回一切正常
这回打开页面看看有没有变化:
草他妈！还是没变！
傻呀你！既然都编译好了能用的bundle.js，那你还引用main.js尼玛呢！煞笔！
这回好了吧！
以后main.js有啥变动 直接webpack ./src/main.js -o ./dist/bundle.js --mode development编译就行了！
6.不觉得每次都得写那么多东西编译，很麻烦吗？我们来继续优化一下
项目根目录新建一个webpack.config.js
来，打开这个文件 ，我们来写一些东西：
const path=require('path');
module.exports={
entry:path.join(__dirname,'./src/main.js'),
output: {
path:path.join(__dirname, './dist'),
filename:'bundle.js'
},
mode:'development'
}
然后重新 npm run dev 回车（类似于刷新作用，配置文件有改动都要这样做一下）
以后编译 直接输入webpack就行了！
网友评论