wekpack笔记
1. webpack 是一个用来构建我们应用程序中的 JavaScript 模块的工具;
2. 可以从CLI 或 API来开始使用 webpack。这里只讲从CLI来使用它;
3. 安装,需要在nodejs环境中:
webpack需要进行全局安装: npm install webpack -g ;
在项目目录下也需要进行安装:npm install webpack --save ;
运行:在项目目录下执行webpack 进行打包;webpack -w 修改后自动打包;
4. 如果使用到了import/export,(有些浏览器未支持)你也可以正常的使用,因为 webpack 会将其替换为 ES5 兼容的代码;
webpack 不会更改你的代码中除
import
/export
以外的部分。如果你在使用其它ES6,请确保你使用了一个像是 babel 的转译器。
5. 文件的配置:创建一个 webpack.config.js
文件,在这个文件中使用如下的配置设置来表示上述 CLI 命令:
var webpack = require("webpack");
var path = require("path");
module.exports = {
entry: './app/index.js', //也可以写未[path.join(__dirname,"public/js/main.js")],
output: {
path: path.resolve(__dirname, 'dist') // path:path.join(__dirname,"public/js/dist"),
filename: 'main.bundle.js',
},
module:{ //配置模块加载器;
loaders:[
{test:/\.css$/,loader:"style!css"},
{test:/\.less$/,loader:"style!css!less"},
{test:/\.(png|jpg)$/,loader:"url?limit=8192"},
]
},
resolve:{ //配置模块别名;
root:path.join(__dirname,"public"),
extensions:['','.js'],
alias:{
"angular":"js/angular.min",
"router":"js/angular-ui-router.min",
"register":"modules/register/register",
"login":"modules/login/login",
"main":"modules/main/main",
"main":"js/main"
}
}
};