webpack初使用
前端工程化
在网页比较简单的时代，以文件可以包含 HTML、CSS、JS；到后来结构、样式、行为的分离，文件开始多起来，慢慢的出现了AMD，CMD ，CommonJS，ES6 Module等，技术变化日新月异，把这些技术统一整合起来，就是工程化。
引用网上一作者的话：
node-sass
github地址：node-sass
首先安装node-sass
npm install node-sass
运行命令行，就能将scss文件变成css文件
npx node-sass src/css/style.scss dist/css/style.css
当我scss文件变动，自动更新为css文件
npx node-sass src/css/style.scss -w dist/css/style.css
生成map文件
npx node-sass src/css/style.scss -w dist/css/style.css --source-map true
在这里遇到最大的问题是没有弄清楚全局安装和局部安装，陷入了好久npm install -g node-sass是全局安装，可以直接使用node-sassnpm install node-sass是局部安装，使用时需要加上相对路径./node_modules/.bin/node-sass；或者使用npx node-sass，npx可以快速找到相对路径。
提示no such file or directory, open '/Users/mac/package.json'，是因为缺少package.json这个文件。
npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\fanzm1\workspace\Astone\0115_NodeJS\package.json' //首先，初始化项目，一路回车就行 npm init -f //接着安装依赖 npm install formidable --save
babel
官方网址：babel
首先安装babel
npm install --save-dev babel-cli babel-preset-env
创建一个.babelrc文件，写上
{ "presets": ["env"] }在创建一个package.json文件，方法：npm init一路回车
打开package.json，添加上内容
{
"devDependencies": {
"babel-cli": "^6.0.0"
}
}运行下面这句就可以将js文件进行翻译
./node_modules/.bin/babel src/js -d dist/js
当我src/js文件有变动，自动更新为dist/js文件
./node_modules/.bin/babel src/js -d dist/js -wtach
watch-cli
今天其他文件，比如image，html等不需要翻译的文件
地址：watch-cli
安装watch-cli
npm i -g watch-cli
使用，只要文件改动动就会拷贝到dist目录里
watch -p "src/images/**/*" -c "cp -r src/images dist/images" watch -p "src/index.html" -c "cp src/index.html dist/index.html"
每一种文件都有一个工具，造成每一种文件都需要开一个窗口，导致很乱，这时webpack出现了，把这些整合在一起
webpack
webpack官网：webpack
首先npm init，初始化出一个package.json
安装webpack
npm install --save-dev webpack
运行npx webpack会让你安装package-cli
创建并编辑文件webpack.config.js
const path = require('path');
module.exports = {
mode: 'production',
entry: './src/js/app.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist/js')
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};app.js引用其他文件
import module1 from './module-1' import module2 from './module-2' module1() module2()
被引用的文件
function fn(){
alert(1)
}
export default fn
/************/
function fn(){
console.log(2)
}
export default fn现在可以把 JS 文件拷贝过去，还不能实现翻译
babel webpack
官网：babel-loader
安装
npm install "babel-loader@^8.0.0-beta" @babel/core @babel/preset-env webpack
配置webpack.config.json文件的rules部分
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: [require('@babel/plugin-proposal-object-rest-spread')]
}
}
}node-sass webpack
官网：sass-loader
安装
npm install sass-loader node-sass webpack --save-dev
编辑配置webpack.config.json文件的rules部分
{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
includePaths: ["absolute/path/a", "absolute/path/b"]
}
}]
}如果报错提示什么安装什么npm install ...。
autoprefixer
github地址：PostCSS Loader
处理 CSS 兼容问题，在属性面前自动加前缀。
安装
npm i -D postcss-loader
编辑文件postcss.config.js
module.exports = {
//parser: 'sugarss', //可以不要
plugins: {
//'postcss-import': {}, //可以不要
//'postcss-preset-env': {}, //可以不要
'postcss-cssnext': {}
//'cssnano': {} //可以不要
}
}编辑文件webpack.config.json文件的rules部分
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } }, //重点这句
{ loader: 'postcss-loader'}, //重点这句
'sass-loader'
]如果报错提示什么安装什么npm install ...。