webpack && parcel

最新推荐文章于 2024-07-20 04:31:40 发布

超人小子

最新推荐文章于 2024-07-20 04:31:40 发布

阅读量437

点赞数

本文链接：https://blog.csdn.net/qq_34410710/article/details/85204230

版权

安装：npm install node-sass -g 出错搜索出错问题

编译：scss XXX.sass XXX.css

自动编译：node-sass sa.scss sa.css -w sa.scss

1.src未翻译的代码

2.dist待发布的代码

3.wendors第三方代码

npm install http-server 安装server局部 -g全局安装在一个文件内

mkdir webpack-demo && cd webpack-demo
npm init -y  //生成package.json
npm install --save-dev webpack@3 //@后边可加版本号

npx webpack //运行webpack
创建webpack.config.js
创建./src/index.js
~~~
const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};
~~~
编辑webpack.config.js
module: {
    rules: [{
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
	    loader: 'babel-loader',
	    options: {
	        presets: ['env']
	    }
        }
    }]
}
//再次运行webpack,会报错，需要下载依赖,根据提示下载  
npm install babel-loader
npm install '@babel/core'
npm install babel-preset-env

安装完成后，运行npx webpack 不报错。
模块化
src/js（index.html（引入js/app.js））/新建.js文件、app.js、dist/index.html

.js
function fn(){
	console.log('b');
}
export default fn


修改：app.js
import a from './a'
import b from './b'

修改webpack配置
module.exports = {
	++++entry: './src/js/app.js',++++
	output: {
		filename: 'main.js',
		++++path: path.resolve(__dirname, 'dist/js')++++
	},
	module: {
		rules: [{
			test: /\.js$/,
			exclude: /(node_modules|bower_components)/,
			use: {
				loader: 'babel-loader',
				options: {
					presets: ['env']
				}
			}
		}]
	}
};
运行npx webpack

安装sass-loader
npm install sass-loader node-sass webpack --save-dev

安装npm install style-loader
安装npm install css-loader

//完整版配置文件
const path = require('path');

module.exports = {
	entry: './src/js/app.js',
	output: {
		filename: 'main.js',
		path: path.resolve(__dirname, 'dist/js')
	},
	module: {
		rules: [{
				test: /\.js$/,
				exclude: /(node_modules|bower_components)/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['env']
					}
				}
			},
			{
				test: /\.scss$/,
				use: [
					"style-loader", // creates style nodes from JS strings
					"css-loader", // translates CSS into CommonJS
					"sass-loader" // compiles Sass to CSS, using Node Sass by default
				]
			}
		]
	}
};

安装 Parcel ：

obal add parcel-bundler

npm:
npm install -g parcel-bundler
在你正在使用的项目目录下创建一个 package.json 文件：
npm init -y
Parcel 可以使用任何类型的文件作为入口，但是最好还是使用 HTML 或 JavaScript 文件。如果在 HTML 中使用相对路径引入主要的 JavaScript 文件，Parcel 也将会对它进行处理将其替换为相对于输出文件的 URL 地址。

接下来，创建一个 index.html 和 index.js 文件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>parcel</title>
</head>
<body>
  <h1>parcel learning</h1>
  <script src="./index.js"></script>
</body>
</html>

执行 parcel index.html 文件就开始打包了，打包后的文件存在于dist文件夹，并且支持热加载（HMR）
当然，也可以自定义端口号 parcel index.html -p 80