webpack ----- 第一章
2021-05-17 04:28
标签：cti font cnpm 模块 webp logs char htm rip 废话不多说，直接走实战！！！ 1、桌面新建一个文件夹：webpack_test 2、在webpack_test文件夹下面新建一个文件夹demo01 3、然后又在demo01文件夹下面建立两个js文件main.js和index.js文件 4、在index.js中写一个函数并导出 5、在main.js中导入index.js中的函数，并调用 6、再在根目录webpack_test下创建一个文件index.html 7、然后在根目录webpack_test下新建一个webpack.config.js的文件，并写配置规则 8、在终端安装各种包 npm init 初始化一下 html-webpack-plugin 下载所需要的插件 9、然后使用webpack编译一下即可,打开的时候去dis目录下打开index_webpack.html webpack ----- 第一章 标签：cti font cnpm 模块 webp logs char htm rip 原文地址：http://www.cnblogs.com/tenro/p/7745113.html//声明一个函数并用export导出
export function add(a, b) {
console.log (a + b);
}
import {add} from ‘./index.js‘
add(3, 5);
add(78, 100);
DOCTYPE html>
html>
head>
meta charset="utf-8">
title>我学习webpacktitle>
head>
body>
body>
html>
const path = require(‘path‘)
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘)
config = {
entry: {
main:‘./demo01/main.js‘
},
output: {
path: path.resolve(__dirname, ‘dist‘) //指定出口文件的路径
filename: ‘[name].js‘ //这是一个上面背景颜色一样的 Chunk name，也可以指定出口路径如规定 ‘./[name].js‘出口就会在js这个文件夹下
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: ‘babel-loader‘
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: ‘index_webpack.html‘,
template: ‘index.html‘
})
]
}
module.exports = config
cnpm install webpack --save-dev 下载webpack模块
cnpm install babel-loader 这个包允许使用 Babel 和 Webpack 转换JavaScript文件
cnpm install babel-core 解释js的文件