-
####webpack使用步骤
###一,安装
#1.npm init (进行初始化)
#2,按照提醒直接回车,创建一个webpack.json文件
#3,npm i vue webpack vue-loader
#4,按照那个 'peer' 安装那个后面的模板
### 二,创建文件
##1,创建src目录,在其下创建文件app.vue 和 idnex.js
#index.js文件如下
// 入口文件:index.js
import Vue from 'vue';
import App from './app.vue';
const root=document.createElement('div');
document.body.appendChild(root)
new Vue({
// 声明一个方法
render:(h)=>h(App)
}).$mount(root)
##2,在根目录下新建webpack.config.js文件,并写入以下代码
// 为了在浏览器中打开,建立webpack这个文件
// 引入路径
const path = require('path')
module.exports = {
// 文件的输入
entry:path.join(__dirname,'src/index.js'),
//文件的输出
output:{
filename:'bundle.js',
path:path.join(__dirname, 'dist')
},
<!-- 由于报错:You may need an appropriate loader to handle this file type. 所以我们需要添加module属性 -->
module:{
rules:[
{
test:/.vue$/, //此为正则表达式,目的是为了识别.vue结尾的文件
loader:'vue-loader'
}
]
}
}
##3,在package.json的scripts添加 build: webpack --config webpack.config.js 即
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},
###三,命令行
在终端中输入 npm run build之后,会在根目录下创建一个dist目录,此目录下面有一个bundle.js
#### 总结
webpack就是把不同的静态资源的类型打包成一个js,然后我们在html中引入这个js的时候,然后我们的html里面的js就可以正常运行 ,然后去执行我们的操作.
因为我们在做前端项目的时候:
我们希望把很多零碎的js打包成一起,因为这样可以减少http请求,同样,我们希望使用模块依赖,因为我们会做很多可复用的代码,把它写在一个模块里去,这样的话,我们在下一次有新项目的时候,可以再去使用原来的模块,而不需要再把原来的代码重写一遍
除此之外,webpack还可以加载前端的所有文件,包括图片和css.
查看全部 -
cross-env 为不同的平台设置统一的环境变量
查看全部 -
当出现 WARN 时把提示的包对应安装好
查看全部 -
onFocusChange 切换保存界面自动保存
查看全部 -
npm i style-loader url-loader file-loader
查看全部 -
不识别css,似乎缺什么css loader
查看全部 -
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config
查看全部 -
ERROR in ./src/app.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <template>
| <div id="test">{{text}}</div>
| </template>
@ ./src/index.js 2:0-27 8:21-24
查看全部 -
使用当前项目里的webpack,而非全局的webpack
> "build": "webpack --config webpack.config.js"
查看全部 -
vscode的插件:
eslint
EditorConfig for VS Code
gitignore
language-stylus
Nunjucks
One Dark Pro
Vetur
。。。
查看全部 -
vscode 中代开命令行 创建文件 npm init;
npm i webpack vue vue-loader
查看全部 -
vue设定:在vue-loader处理当中,当组件要显示的时候才加载样式,这样做的好处就是当异步加载组件的时候同时也把样式给加载过来,可以节省流量
查看全部 -
jsx语法与.vue的单文件语法各有各的好处,.vue结构更清晰组件化更强,而jsx语法则可以使用js的原生方法,更加灵活一些
查看全部 -
前端什么?
查看全部 -
postcss用来优化css的,通过一系列的组件来优化,如:autoprofixer,为css加前缀
查看全部
举报