vue_webpack

1.生成项目工程描述文件

npm init

2.安装webpack开发依赖

(本地安装):npm install -D

3.(webpack4.0版本以上安装webpack cli)

npm install webpack-cli -D

4.本地安装下webpack不能直接使用,需要指定路径执行。使用npx webpack -v解决,解决后:

npx 会自动查找当前依赖包中的可执行文件,如果找不到,就会去 PATH 里找。如果依然找不到,就会帮你安装。

5.使用jquery:

到 https://www.npmjs.com/ 搜索安装,然后在main.js中引入

6.打包main.js

npx webpack .\src\main.js -o .\dist\bundle.js

7.简化第六步的操作

新建一个webpack.config.js文件,内容如下:

const path = require("path")
module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, 'dist')
    },
    //  mode: 'development'  减少冗余提示信息
}

 然后直接保存,接着npx webpack就会在项目根目录下生成bundle.js文件,然后在index.html中改变引入的main.js为bundle.js

8.为了便于操作引入服务器热部署,简化每次的npx webpack,不是必须项

npm install webpack-dev-server -D

在package.json中的scripts中引入

"start":"webpack-dev-server"

然后在vscode控制台输入npm run start

9.

 

posted @ 2020-10-18 15:25  abcdefgab  阅读(61)  评论(0)    收藏  举报