最近在学习 webpack, 跟着课程一个单页面应用, 在这里记录一下这个部分主要讲了如何配置 webpack 的环境, 以及 webpack dev 的配置
记录比较粗略, 后续会更新
1. 开发环境: vscode,node.js,vue.js,webpack
大家自己安装一下 node.js 可以参考菜鸟教程
使用的 IDE 是 VScode
2. 项目初始化
快捷键 ctrl+` 打开 vscode 控制台
vscode 界面
2.1 安装 webpack vue vue-loader
- npm init
- npm i webpack vue vue-loader
npm 出现 warn 提醒你需要依赖, 按照提示进行安装
warn
安装相应的 loader
npm i CSS - loader vue - template - compiler
2.2 配置 webpack 可以加载 app.vue 文件
首先创建 src 文件夹, 并在其下创建 app.vue 最为主代码文件, index.js 作为入口文件
基础文件
app.vue 文件内容如下:
- <template>
- <div id="text">{{text}}</div>
- </template>
- <script>
- export default{
- data(){
- return {
- text: 'abc'
- }
- }
- }
- </script>
- <style>
- #test{
- color: red;
- }
- </style>
在 src 同级目录下
创建 webpack.config.js 文件, 配置入口 entry, 输出 output
创建 package.json 文件和 webpack.config.js 文件
- //webpack.config.js
- const path = require('path') module.exports = {
- entry: path.join(__dirname, 'src/index.js'),
- // 调用 Index.js 作为入口文件
- output: { // 打包完的 js 文件会在 bundle.js 中, 这个文件待会会自动生成的
- filename: 'bundle.js',
- path: path.join(__dirname, 'dist') // 用来存放 bundle.js 文件的地址, 自己定义
- },
- module: {
- rules: [{
- test: /.vue$/,
- loader: 'vue-loader'
- }]
- }
- }
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)
配置 package.json 文件中的 scripts 命令, 添加 build
- "scripts": {
- "test": "echo \"Error: no test specified\"&& exit 1",
- "build": "webpack --config webpack.config.js"
- },
在控制台输入 npm run build 命令进行打包, 打包成功后如图
webpack 打包完成后
2.3 配置 webpack 可以加载非 Js 文件
webpack.config.js 文件具体配置
在 webpack.config.js 中的 module: {} 模块中添加 rules:[], 可以设置 webpack 需要识别的文件类型, 之前已经设置了 vue 文件类型, 好需要添加 css / 图片
- //webpack.config.js
- module: {
- rules: [
- {
- test: /.vue$/,
- loader: 'vue-loader'
- },
- {
- test: /.css$/,
- use:[
- 'style-loader',
- 'css-loader'
- ]
- },
- {
- test: /\.(gif|jpg|png|svg)$/,
- use: [{
- loader: 'url-loader',
- options: {
- limit: 1024,
- name:'[name].[ext]'
- }
- }]
- }
- ]
- }
在控制台执行命令, 安装相应的 loader
npm i style - loader css - loader url - loader file - loader
测试非 js 类型文件打包效果
目标: 在 js 代码中 import 这些非 js 类型的文件中的内容
再 src 子目录下, 创建测试文件 test.css 以及在 images 中放入 jpg 图片代用 (一张就可以了, emmm 我当时放多了就先不删了)
src 下文件结构
在 Index.js 中 import 这些非 js 文件
- //index.js
- import Vue from 'vue'
- import App from './app.vue'
- import './assets/styles/test.css' //import css 文件
- import './assets/images/0.jpg' //import 图片
- const root = document.createElement('div')
- document.body.appendChild(root)
- new Vue({
- render: (h) => h(App)
- }).$mount(root)
最后在控制台执行 npm run build 测试结果
打包成功图片类似上面
2.4 关于 css 预处理器 stylus 的配置和测试
stylus 是 css 的一种预处理器, 文件类型是 .styl 我们这里对其进行配置
首先在 webpack.config.js 文件中的 rules:[] 模块中跟上面一样, 加入如下代码, 让其可以识别. styl 文件
- //webpack.config.js
- {
- test:/.styl$/,
- use: [
- 'style-loader',
- 'css-loader',
- 'stylus-loader'
- ]
- }
然后在控制台安装 stylus 所需的 loader 文件
npm i style - loader stylus - loader
最后在控制台执行 npm run build 测试结果
2.5 配置 webpack-dev-server: 专门用在开发环境的打包
因为正式环境和我们的开发环境有所区别, 所以需要配置 dev 用来区分
首先, 安装 webpack-dev-server
npm i webpack - dev - server
然后, 修改 package.json 文件 , 在 build 下面添加 dev 配置
package.json 文件配置
然后, 修改 webpack.config.js
在全局添加 target:'web'
config.js
因为这个文件要同时用在开发环境和正式环境, 所以要加一个环境判断, 在跑 npm 的时候添加变量标识不同环境
因为在 windows 和 mac 环境下的命令会不同, 这里安装 cross-env 包, 使得在不同开发环境下命令相同
npm i cross-env
再次修改 package.json 文件, 在 build: 和 dev:" 行添加 dev 命令
cross-env NODE_ENV=development 后面不变
package.json 文件 build
然后, 在 webpack.config.js 文件中进行判断
首先, 配置 config.devServer
webpack2 之后就可以直接用 config.devServer 进行配置了
更改文件头部几行代码
在文件的最后加上如下代码
config.devServer
注意:
host:'0.0.0.0'不要直接写 localhost, 这样别人的电脑就访问不了了; port 不要被占用, 不然会打不开
最后. 安装 html-webpack-plugin 插件使得 html 可以作为入口, 自动包含 JS
npm i html - webpack - plugin
修改 webpack.config.js 文件
config.js
config.js
至此, dev 配置基本完成
控制台执行 npm run dev
npm run dev
打包成功的话就可以在浏览器中查看效果了,
如果出现错误, 根据提示修改, 注意端口是否占用我的 8000 端口占用了, 后来用了 8080 端口就好了
浏览器访问: localhost:8080, 可以查看渲染效果恩, 背景图 0.jpg 是我爱豆 23333 笔芯注意左上角有红色的 abc
浏览器效果
2.6 最后还有一些东西要加在 config.js 中
最后还要加一些东西
1) historyFallback:{}
因为我们做的是单页应用, 所以要加一下地址映射到入口 index.html, 这个先忽略
2) 热加载功能
hot 功能, 可以实现局部渲染: 比如你改了一个组件的代码, 页面只重新渲染这个组件而不是整个页面进行渲染, 不需要进行刷新操作
3) 一些插件
webpack.HotModuleReplacementPlugin() 启动 hot 功能
webpack.NoEmitOnErrorsPlugin() 去除一些不必要的信息
4) 浏览器调试代码功能的工具
在浏览器中调试的时候, 代码不会转码
config.devtool = #cheap - module - evel - source - map
最后配置完成后, 重新 npm run dev 一次
npm run dev
成功之后, 可以在浏览器中测试热加载效果, 修改 app.vue 文件中的 text 的内容, 就可以看到左上角那个红色的字在变了 emmmm
- //app.vue
- <template>
- <div id="text">{{text}}</div>
- </template>
- <script>
- export default{
- data(){
- return {
- text: 'abc' // 打开浏览器, 然后直接改这里就可以实时看到文字变化效果了
- }
- }
- }
- </script>
- <style>
- #test{
- color: red;
- }
- </style>
来源: http://www.jb51.net/article/135055.htm