从零配置webpack-vue项目(1)，万字长文

filename:‘bundle.js’ //打包后的文件名

},

mode:“production”, //生产环境

}

4.package.json：

“scripts”: {

“test”: “echo “Error: no test specified” && exit 1”,

“build”:“webpack --config webpack.prod.js” //打包处添加

},

5.创建src文件夹目录：

新建index.js 写上：

document.write(‘hello world’);

6.运行npm run build 命令打包 可看到生成了dist目录 下面有bundle.js是打包后的文件

可在dist下面新建index.html，将bundle.js引入，浏览器打开可看到打包后的文件

//引入bundle.js 打开即可看到

打包css方法：

cnpm i css-loader style-loader --save-dev

import ‘./style/helloworld.css’   即可使用

入口文件 index.js:

import ‘./style/helloworld.css’

document.write(‘hello world’);

webpack配置文件下：

module:{

rules:[

{

test:/.css$/,

loader:‘style-loader!css-loader’

},

]

}

js兼容es6语法：

npm i @babel/core @babel/preset-env babel-loader -D

webpack配置文件中添加规则：

module:{

rules:[

{

test:/.css$/,

loader:‘style-loader!css-loader’

},

{

test:/.js$/,

use:‘babel-loader’

},

]

}

项目文件下新建.babelrc文件：

{

“presets”: [

[

“@babel/preset-env”

]