webpack4 从零开始

最新推荐文章于 2020-07-22 02:15:47 发布

zhangleia

最新推荐文章于 2020-07-22 02:15:47 发布

阅读量143

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/zhangleia/article/details/103484517

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.创建一个名为webpack-study目录，进入目录

2.通过运行以下命令初始化

cnpm init -y

3、并引入 webpack 4：

cnpm i webpack --save-dev

4、我们还需要 webpack-cli ，作为一个单独的包引入：

cnpm i webpack-cli --save-dev

5.安装wepack-dev-server

cnpm i webpack-dev-server --save-dev

6.配置package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
    "dev": "webpack --mode development",
    "ff": "webpack-dev-server --open --port 4000 --contentBase src --hot"
  },

7.手动创建src 目录，在src下创建一个index.js文件，index.js为webpack4 默认入口

index.js内容

console.log('webpack运行成功')

7.1在src下创建一个index.html

<!DOCTYPE html>
<html>
<head>
	<title>首页</title>
</head>
<body>
<p>测试内容。。。</p>
</body>
</html>

8.执行命令

npm run ff

到此为止就可以运行了，接下来装插件和loader

9. html-webpack-plugin 有2个作用 1将页面放到内存中去，2，不用引用main.js

命令：

cnpm i html-webpack-plugin -D

然后配置webpack.config.js

const path = require('path')
const webpack = require('webpack');  // 这个插件不需要安装，是基于webpack的，需要引入webpack模块
const htmlWebpackPlugin = require('html-webpack-plugin')  //引入HTML插件

module.exports = {
    devServer: {
        open: true, // 本地服务器所加载文件的目录
        port: "4000",  // 设置端口号为8088
        inline: true, // 文件修改后实时刷新
        contentBase: 'src', //指定托管目录
        hot: true // 热更新
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(), // 热更新插件
        new htmlWebpackPlugin({
            template: path.join(__dirname, './src/index.html'),
            filename: 'index.html'
        })
    ]
}

10.引入jquery

安装：

cnpm i jquery -D

然后在index.js中

import $ from 'jquery'

之后就可以使用了

11.webpack默认不识别css类型，需要装 style-loader 和 css-loader

安装：

cnpm i style-loader css-loader -D

然后配置webpack.config.js

    module: { //这个节点用于配置所有第三方模块，加载器
        rules: [
            {test: /\.css$/, use: ['style-loader', 'css-loader']}
        ]
    }

在index.js 引入 css 文件

import './css/index.css'

12.webpack默认不识别less类型，需要装 less-loader

安装：

cnpm i less-loader -D

配置webpack.config.js

    module: { //这个节点用于配置所有第三方模块，加载器
        rules: [
            {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}

        ]
    }

less-loader 要依赖于 style-loader css-loader

在index.js引入index.less

import './css/index.less'

13.webpack默认不识别 scss类型文件，需要安装 sass-loader

安装：

cnpm i sass-loader -D

之后会提示安装 node-sass

cnpm i node-sass -D

配置webpack.config.js

    module: { //这个节点用于配置所有第三方模块，加载器
        rules: [
            {test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']}
        ]
    }

sass-loader 也依赖于style-loader css-loader

14.接下来安装 url-loader 和 file-loader,因为css文件里如果引用图标或图片路径时，需要先装这2个loader，才能使用

安装：

cnpm i url-loader file-loader -D

15.安装bootstrap，使用bootstrap图标

安装：

cnpm i bootstrap -D

注意如果是bootstrap4 还需要安装 cnpm i open-iconic -D

如果安装不成功可以用这个命令 cnpm i https://github.com/iconic/open-iconic.git -D

配置webpack.config.js

    module: { //这个节点用于配置所有第三方模块，加载器
        rules: [
            {test: /\.(eot|otf|svg|ttf|woff)$/, use: 'url-loader'}  //处理bootstrap4 图标
        ]
    }

在index.js中

import 'bootstrap/dist/css/bootstrap.css'
import 'open-iconic/font/css/open-iconic-bootstrap.css'

在index.html 中

<span class="oi oi-account-login"></span>
<span class="oi oi-account-logout"></span>

16.webpack 只能识别部分ES6语法，高级的无法识别，要装babel来转换下

安装：

cnpm i babel-core babel-loader babel-preset-env --save-dev

cnpm i @babel/core @babel/preset-env --save-dev

cnpm i @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime -D

cnpm i @babel/runtime -D

配置webpack.config.js

    module: { //这个节点用于配置所有第三方模块，加载器
        rules: [
            {test: /\.js$/, exclude: /node_modules/,use: 'babel-loader'} 
        ]
    }

在根目录下创建一个名为 .babelrc 的文件注意前面有个点，json格式文件

内容如下：

{
  "presets": ["@babel/preset-env"],
  "plugins": [
      "@babel/plugin-transform-runtime",
      "@babel/plugin-proposal-class-properties"
  ]
}

在index.js文件中加入

// ES6引入了类的概念
class Person {
	// 使用static 关键字，可以定义静态属性
	// 所谓的静态属性就是可以直接通过 类名访问的属性
	// 实例属性 只能通过类的实例来访问的属性
	static info = {name: '蔡徐坤', age: 22}
}

console.log(Person.info)

17.接下来用webpack安装vue

cnpm i vue -S

在index.js 里引入vue

import Vue from ‘vue’

注意：import 的规则是这样，

1.到node_modules 下找到vue文件夹

2.在vue文件夹找到package.json.找到main节点，main节点指定了vue.js的路径

webpack安装后，main指定的路径是，"main": "dist/vue.runtime.common.js", 这个js不是平时所用的vue.js 此时运行会报错：vue.runtime.esm.js:620 [Vue warn]: You are using the runtime-only build of Vue where the template compiler

解决办法1.将main改成 vue.js

解决办法2 把index.js 引入代码 import Vue from 'vue' 改成 import Vue from '../node_modules/vue/dist/vue.js'

解决办法3 在webpack.config.js增加一个节点在module后面

    resolve: {
    	alias: {
    		"vue$": "vue/dist/vue.js"
    	}
    }

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>首页</title>
</head>
<body>
	<div id="app">
		<ul>
			<li v-text="msg"></li>
			<li>这是第li</li>
			<li>这是第li</li>
			<li>这是第li</li>
			<li>这是第li</li>
			<li>这是第li</li>
			<li>这是第li</li>
			<li>这是第li</li>
			<li>这是第li</li>
			<li>这是第li</li>
		</ul>
		<div class="myImage">
			
		</div>
		<div class="myImage2">
			
		</div>
		<span class="oi oi-account-login"></span>
		<span class="oi oi-account-logout"></span>
		<span class='oi oi-arrow-bottom'></span>		
	</div>

</body>
</html>

zhangleia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack4 从零开始

1.创建一个名为webpack-study目录，进入目录2.通过运行以下命令初始化cnpm init -y3、并引入 webpack 4：cnpm i webpack --save-dev4、我们还需要webpack-cli，作为一个单独的包引入：cnpm i webpack-cli --save-dev5.安装wepack-dev-server...
复制链接

扫一扫