webpack初始化-摩杜云开发者社区

1.项⽬目初始化: 详⻅见⼿手动初始化案例例

2.导⼊入相关插件:

(1). 引⼊入vue:

$ npm install vue --save ```
package.json⽂文件中增加依赖: ```
"dependencies": {
"vue": "^2.6.6" }

修改src/main.js⽂文件: ``` import Vue from 'vue' var vm = new Vue({ el:'#app', data: { msg:'hello vue' } })

在index.html⽂文件中的body元素增加如下: ```
<div id="app">{{ msg }}</div>

(2). 引⼊入babel: 使⽤用了了es6的语法,但是现在很多浏览器器对es6的⽀支持不不是很好,所以在编译时需要将这些语法转换es5的语法,可以使⽤用babel来进⾏行行编译.

$ npm i babel-core babel-loader --save ```
在webpack.config.js的rules属性下添加: ```
{
test: /\.js$/, # ⽤用正则匹配⽂文件,⽤用require或者import引⼊入的都会匹配到
} ```
loader: "babel-loader", exclude: /node_modules/
# 加载器器名
# 排除node_modules⽬目录(不不加载node模块中的js)
webpack编译打包:

$ ./node_modules/.bin/webpack --mode="development" ``` 报错:

Cannot find module '@babel/core'
babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'. ```
解决⽅方案:
1. 版本问题: package.json修改babel-loader版本为7.1.5: ```
{
"devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5"
} }

原有版本为^8.0.5

安装@babel/core依赖:

$ npm install --save-dev @babel/core ```
webpack编译完成后⽤用浏览器器打开index.html⽂文件报错: ```
[Vue warn]: Cannot find element: #app

 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>) ```
原因是使⽤用了了vue的运⾏行行时的版本,⽽而此版本在编译时不不可使⽤用的,需要切换成(运⾏行行时+编译的)版本.
package.json:

⽂文件解析resolve resolve: {

alias: { 'vue$': 'vue/dist/vue.esm.js' } }

vue$的作⽤用其实就是为了了解决⽂文件路路径过⻓长,⽅方便便引⽤用.

(3). 引⼊入css加载器器: 引⼊入css-loader(加载器器)和style-loader(转换器器).
style-loader⽬目的是把css转成js,再在html中以style的⽅方式嵌⼊入css.

npm install --D css-loader style-loader webpack.config.js的rules中增加如下配置: { test: /\.css$/, loader: 'style-loader!css-loader'